Animate to a different background color, then back
I am trying to make my white background green. I currently have this code that turns it green:
$( "#modal_newmessage" ).animate({
backgroundColor: "#8bed7e"
}, 500 );
However, I can't figure out how to get it to rotate to white again in the same animation. How to do it?
+3
Patrick reck
source
to share
3 answers
You can chain another call .animate()
as the animations will be queued in the queue fx
.
$("#modal_newmessage").animate({
backgroundColor: "#8bed7e"
}, 500).animate({
backgroundColor: "#fff"
}, 500);
Remember, most jQuery functions can be grouped together without having to be called $("#modal_newmessage")
twice.
Look at here.
+4
Alexander
source
to share
This should work:
$( "#modal_newmessage" ).animate({
backgroundColor: "#8bed7e"
}, 500, function() {
$( "#modal_newmessage" ).animate({ backgroundColor: "#fff" });
} );
+1
techfoobar
source
to share
Try the following:
$(function() {
$( "#modal_newmessage" ).animate({
backgroundColor: "#aa0000",
color: "#fff",
width: 500
}, 1000 ).animate({
backgroundColor: "#fff",
color: "#000",
width: 240
}, 1000 );
});
Note:
To animate background colors, you need jQuery ui
color animation.
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
+1
Jai
source
to share