如何使用jQuery UI颜色动画将元素淡入颜色然后回到其原始颜色？

Question

我现在使用如下：

$('input[value=NEW]:hidden').parent().parent().animate({ 
          backgroundColor: "#FF9933", 
          duration: 500 
         }).animate({ 
          duration: 500, 
          backgroundColor: "#FFFFFF" 
         }); 

看起来这几乎〜〜作品，但它似乎并没有在等待的全职工作。

有没有更好的方法来做到这一点？

Answer 1

嗯，你的代码似乎适用于我（请参阅我的意见在您的问题下）。

虽然我不确定你的意思是“它似乎没有等到全职”。

你的意思是说你想在第二个动画之前延迟？

如果是的话，试试这个：http://jsfiddle.net/7kKvW/1/

$('input[value=NEW]:hidden').parent().parent().animate({ 
    backgroundColor: "#FF9933", 
    duration: 500 
}) // delay the next item in the queue by 500ms 
    .delay(500).animate({ 
    duration: 500, 
    backgroundColor: "#FFFFFF" 
}); 

• http://api.jquery.com/delay/（需要jQuery的1.4或更高版本）

Answer 2

我发现下面的方法对可能开始的项目有点更流畅在两个动画事件的持续时间内进行动画。另外，我没有延迟链接事件，而是将其添加为complete函数，以便如果第一个停止，第二个不会发生。

另外，持续时间不必被包括作为对象。 Duration是默认值，对animate效果的第二个参数。

http://api.jquery.com/stop/

// Stop makes sure any previous animations on this 
// elements aren't making the display 'flashing' in unexpected ways 
$(jqueryLookup).stop(true, true, true).animate({ 
    backgroundColor:"#F93", 
}, 1000, function() { 
    // Begin the second animation upon completing the first 
    $(this).animate({ 
     backgroundColor:"#FFF" 
    }, 500); 
}); 

希望帮助你！