如何在jQuery中改變動畫背景圖像？

我正在嘗試爲按鈕創建一個重複的「脈動心跳」視覺效果。我不相信這可以在CSS中完成。但是，如何爲jQuery或JS中的背景圖像更改制作動畫？如何在jQuery中改變動畫背景圖像？

我希望能夠做到以下幾點

$(this).animate({ 
        'background-image' : '-webkit-linear-gradient(top, white, red)', 
        'background-image' : '-linear-gradient(top, white, red)' 
       }, 4000);

但jQuery的不允許的CSS地圖非數值。

謝謝。

來源

2012-05-15 JMan

檢查這個http://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery – Dhiraj

你是正確的，你不能用css3動畫（當前）動畫css背景。您可以爲背景圖片製作動畫效果（僅在此時使用Chrome 18）。 jQuery不允許漸變的方向動畫。 – mrtsherman

您可以使用cssHooks編寫自己的動畫 - 創建一個假CSS樣式的按鍵，以您想要的方式設置背景，並將數字作爲其值，然後可以在.animate()中使用該僞造的樣式。

http://api.jquery.com/jQuery.cssHooks/

另外，如果你的動畫另一個屬性可以使用step回調手工進行更改（不推薦，除非你使用的是很舊版本的jQuery）。

來源

2012-05-15 18:48:33

如何在jQuery中改變動畫背景圖像？

回答

相關問題