使用SetInterval＆SetTimeout的JQuery自定義動畫問題

我遇到的問題是IE和Safari（Mac OS X不是Windows版本）在動畫期間閃爍圖像，有時根本不做動畫。加載後，Google，Firefox和Opera不會出現此問題。我認爲它每次都會重新載入圖像以引起閃爍。使用SetInterval＆SetTimeout的JQuery自定義動畫問題

這裏的測試場地：http://www.yeoworks.cz.cc/otherdomains/theoasis/

這裏的未壓縮的jQuery代碼：

$(document).ready(function(){ 
//LOGO ANIMATION 
setInterval(function(){ 
setTimeout(function(){ 
$('#logoani').css('background-image', 'url(ootr1.png)'); 
}, 0); 
setTimeout(function(){ 
$('#logoani').css('background-image', 'url(ootr2.png)'); 
}, 200); 
setTimeout(function(){ 
$('#logoani').css('background-image', 'url(ootr3.png)'); 
}, 300); 
setTimeout(function(){ 
$('#logoani').css('background-image', 'url(ootr4.png)'); 
}, 400); 
setTimeout(function(){ 
$('#logoani').css('background-image', 'url(ootr5.png)'); 
}, 500); 
setTimeout(function(){ 
$('#logoani').css('background-image', 'url(ootr4.png)'); 
}, 600); 
setTimeout(function(){ 
$('#logoani').css('background-image', 'url(ootr3.png)'); 
}, 700); 
setTimeout(function(){ 
$('#logoani').css('background-image', 'url(ootr2.png)'); 
}, 800); 
}, 900); 
});

感謝您的幫助:)

來源

2011-09-22 yanike

夥計。使用動畫gif。 –

這是我做的第一件事，但質量與GIF的SUCKS。我試圖擺脫Flash，所以動畫在沒有閃光燈的設備上工作。我等不及了。 – yanike

如果GIF動畫（甚至用很少的調色板壓縮）還是沒有辦法，我會嘗試一種不同的方法。這可能比你值得的更麻煩;這個bug在Safari中並沒有發生，我真的認爲你可以用精心壓縮的動畫gif到達那裏，但是...

而不是每次更改背景圖像的URL，也許IE &如果所有圖像都存在於頁面上（絕對定位在另一頁上），則Safari會更好，並且您分別稱爲.show()和.hide()。

我會將所有這些圖像（或包含<img>標籤的jQuery對象）存儲在數組中，並創建一個通過setInterval每100毫秒運行一次的函數。當它運行時，.show()陣列中的'下一個'圖像，同時告訴當前可見的圖像到.hide()。

通過這種方式，您可以確保在任何給定時刻總是有圖像可見，並且沒有閃爍。

來源

2011-09-22 21:42:15 Chazbot

很好的答案！我正試着搞亂Z-Order。謝謝。通過這種方式，我可以保留PNG，如果我因任何原因需要更改網站，他們可以混合使用我選擇的任何背景。 – yanike

啊是的，z順序是相同的基本思想=）。祝你好運！ – Chazbot

謝謝我發現了另一種使用CSS Display：None＆Block的方法。 – yanike

使用SetInterval＆SetTimeout的JQuery自定義動畫問題

回答

相關問題