Jquery animate but then back to normal

Question

Consider the div "dMyDiv"

I noticed that in jquery I can animate like this:

$( "#dMyDiv").animate({ backgroundColor: "#aa0000" }, 1000 ); 

Brings red as a colored background, my div. But is there any way after that to say 10 seconds, return to my normal white background of my div? I see that there is a callback function, but I'm not sure that you can start the animation, and as soon as the animation is done, to return to my normal background (before the animation). Should I just do this:

  $( "#dMyDiv").animate({ backgroundColor: "#aa0000" }, 1000, function() { $(#dMyDiv").animate({ backgroundColor: "#fff" }, 1000); }; ); 

Value after red animated, just animate again to white?

Answer 1

I was able to do this with these guys:

http://jsfiddle.net/aN7qz/

Here is the code:

 $( "#myDiv").animate({ backgroundColor: "#aa0000" }, 1000, function() { $("#myDiv").animate({ backgroundColor: "#fff" }, 1000); } ); 

Answer 2

You're right. the third parameter is a function that is executed after the animation is completed.

 $("#dMyDiv").stop().animate({backgroundColor:'#aa0000'},1000,function(){ $(this).animate({backgroundColor:'#fff'},1000); }); 

Answer 3

You can use setTimeout:

 $("#dMyDiv").stop(true, true).animate({ backgroundColor: "#aa0000" }, 1000, function() { setTimeout(function() { $(#dMyDiv").animate({ backgroundColor: "#fff" }, 1000); }, 10 * 1000); });