jquery - jquery 动画但随后恢复正常

Question

考虑一个 div “dMyDiv”

我注意到在 jquery 中我可以制作动画，这样：

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

为我的 div 带来类似红色的彩色背景。但是有没有办法在说 10 秒后回到我的 div 的正常白色背景？我看到有一个回调函数，但我不确定是否可以启动动画，并且一旦动画完成就回到我的常规背景（动画之前）。我应该这样做：

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

意思是在红色动画之后，只是再次动画到白色？

Answer 1

你是对的。第三个参数是动画完成后执行的函数。

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

Answer 2

您可以使用 setTimeout：

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

    backgroundColor: "#aa0000"

}, 1000, function() {

   setTimeout(function() {       

       $(#dMyDiv").animate({ 

           backgroundColor: "#fff" 

       }, 1000);

   }, 10 * 1000);

});

Answer 3

我能够和这些人一起做到这一点：

http://jsfiddle.net/aN7qz/

这是代码：

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