如何使用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); 
}); 

希望幫助你！