CODEWITHSUNDEEP
jqueryjquery-ui
oJM86o
oJM86o

Reputation: 2118

jquery animate but then come back to normal

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?

Upvotes: 7

Views: 4717

Answers (3)

oJM86o
oJM86o

Reputation: 2118

I was able to do it with this guys:

http://jsfiddle.net/aN7qz/

Here is the code:

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

Upvotes: 1

Code Maverick
Code Maverick

Reputation: 20415

You could use setTimeout:

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

    backgroundColor: "#aa0000"

}, 1000, function() {

   setTimeout(function() {       

       $(#dMyDiv").animate({ 

           backgroundColor: "#fff" 

       }, 1000);

   }, 10 * 1000);

});

Upvotes: 3

lu1s
lu1s

Reputation: 5801

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);
});

Upvotes: 7

Related Questions