jquery animate but then come back to normal

Question

Consider a div "dMyDiv"

I notice in jquery I can animate so this:

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

Brings a red like colored background to my div. But is there a way to then after say 10 seconds go back to my normal white background of my div? I see there is a callback function but Im not sure if it is possible to start the animation, and once the animation is done to go back to my regular background (before the animation). Should I just do this:

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

Meaning after the red animate, just animate again to white?

Answer 1

You're right. the third parameter is a function that executes once the animation is complete.

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

Answer 2

You could use setTimeout:

$("#dMyDiv").stop(true, true).animate({

    backgroundColor: "#aa0000"

}, 1000, function() {

   setTimeout(function() {       

       $(#dMyDiv").animate({ 

           backgroundColor: "#fff" 

       }, 1000);

   }, 10 * 1000);

});