jQuery動畫循環似乎發送所有動畫元素瘋狂！

Question

我以前問過關於設置動畫循環播放兩次以上的問題;

一旦我將代碼添加到我現有的代碼中，它似乎發送我所有的動畫元素beserk;你會知道做錯了什麼嗎？

演示鏈接：http://www.prosperitymedia.co.uk/other/

問題也是您的瀏覽器可能會崩潰已墜毀我的Firefox幾次所以要小心，動畫似乎是想很瘋狂

$(function() { 

function doAnimation() { 

$('#ochreWrapper img').hide(); 
$('#ochreTextOne, #ochreTextTwo, #ochreTextThree').hide(); 

var displayIDs = "img#imgPisa, img#imgBankChina, img#imgSydney, img#imgPetronas, img#imgBooks, img#imgKremlin, img#imgBridge, img#imgEmpire, img#imgLetterbox, img#imgTrafficLight, img#imgPavement, img#imgOchre, img#imgStephensTower, img#imgClouds, img#imgBus, img#imgRickshaw, img#imgPlane, img#imgPeople, img#imgWoman, img#swooshOne, img#swooshTwo, img#swooshThree"; 


$(displayIDs).css('display', 'block'); 
$(displayIDs).animate({ opacity: 0 }, 0); 



//s1 
$('img#imgPisa').css({ "bottom" : "-30px"}).animate({ "bottom": "0", "opacity": 1}, 1000); 
$('img#imgSydney').css({ "bottom" : "-40px" }).animate({ "bottom" : "0", "opacity": 1}, 1000); 
$('img#imgPavement').css({ "bottom" : "0" }).animate({ "bottom" : "3%", "opacity": 1}, 1000); 

//s2 
$('img#imgBankChina').css({ "bottom" : "-30px"}).delay(500).animate({ "bottom": "0", "opacity": 1}, 1000); 
$('img#imgPetronas').css({ "bottom" : "5%"}).delay(500).animate({ "bottom": "12.1%", "opacity": 1}, 1000); 
$('img#imgLetterbox').css({ "bottom" : "-20px"}).delay(500).animate({ "bottom": "0%", "opacity": 1}, 1000); 
$('img#imgClouds').css({ "left" : "0"}).delay(500).animate({ "left": "0%", "opacity": 1}, 1000).delay(500).animate({ "left": "200px", "opacity" : 1 }, 25000); 

//s3 
$('img#imgKremlin').css({ "bottom" : "25%"}).delay(1000).animate({ "bottom": "34%", "opacity": 1}, 1000); 
$('img#imgOchre').css({ "bottom" : "0"}).delay(1000).animate({ "bottom": "7%", "opacity": 1}, 1000); 

//s4 
$('img#imgBooks').css({ "bottom" : "13%"}).delay(1500).animate({ "bottom": "23%", "opacity": 1}, 1000); 
$('img#imgStephensTower').css({ "bottom" : "12%"}).delay(1500).animate({ "bottom": "22.5%", "opacity": 1}, 1000); 

//s5 
$('img#imgBridge').css({ "bottom" : "36%"}).delay(2000).animate({ "bottom": "46%", "opacity": 1}, 1000); 

//s6 
$('img#imgEmpire').css({ "bottom" : "38%"}).delay(2500).animate({ "bottom": "48.7%", "opacity": 1}, 1000); 
$('img#imgTrafficLight').css({ "bottom" : "-10px"}).delay(2500).animate({ "bottom": "3%", "opacity": 1}, 1000); 

//s7 
$('img#imgBus').css({ "left" : "5%"}).delay(3000).animate({"opacity" : 1}).animate({ "left": "1000px", "opacity": 1, "bottom" : "50px"}, 7000); 
$('img#imgPlane').delay(3000).animate({"opacity" : 1}).animate({ "left" : "80%", "opacity" : 1, "top" : "-75px" }, 20000); 

//s8 
$('img#imgRickshaw').css({ "left" : "5%"}).delay(4000).animate({"opacity" : 1}).animate({ "left": "1000px", "opacity": 1, "bottom" : "50px"}, 7000); 

//s9 
$('img#imgPeople, img#imgWoman').css({ "bottom" : "-20px" }).delay(10000).animate({"bottom" : "0", "opacity" : 1 }, 1000); 

//s10 
$('#ochreTextOne').delay(10000).fadeIn(1000).delay(10000).fadeOut(500); 
$('img#swooshTwo, img#swooshThree').hide(); 
$('img#swooshOne').show().animate({ "opacity" : 1}, 0); 
$('img#swooshOneOverlay').css({ "right" : "0", "display" : "block" }).delay(10000).animate({ "right" : "1500px" }, 3000, function(){ $('img#swooshOne').hide(); $('img#swooshTwo, img#swooshThree').show().animate({ "opacity" : 1}, 0); }).delay(3000).delay(10100).animate({ "right" : "0" }, 3000); 
$('img#swooshTwoOverlay').css({ "right" : "-1500px", "display" : "block" }).delay(10100).animate({ "right" : "0px" }, 3000).delay(3000).delay(10000).animate({ "right" : "-1500px" }, 3000); 


//s11 
$('#ochreTextTwo').css({ "padding-left" : "50px" }).delay(22000).fadeIn(1000).delay(10000).fadeOut(500); 


//s12 
$('#ochreTextThree').css({ "padding-left" : "50px" }).delay(33000).fadeIn(1000).delay(10000).fadeOut(500).delay(0, doAnimation) 

doAnimation(); 
} 


    doAnimation(); 

}); 

Answer 1

我想有這裏有一些問題促成了這個問題。首先，.hide()沒有持續時間（也可能是您在此處使用的其他呼叫）不會排隊，而是立即完成。您的循環不會等待動畫完成，然後再運行另一次迭代，這就是爲什麼您會看到很多閃爍。

我的建議是修改代碼，等待第一個動畫完成後再啓動另一個動畫。這可以通過多種方式完成。要做到這一點

一個辦法是找出你的動畫的全程運行時間，然後添加遞歸調用，而不是成的setTimeout：

//（假設30秒的運行時間）

setTimeout(function(){doAnimation();},30000); 

另一種可能性是確定哪些動畫是最後完成的動畫，然後在該動畫上添加回調以在完成後開始另一個動畫。

編輯：我提到了多個問題，但忘了提及另一個。我沒有加上持續時間，但似乎你有不同的動畫長度不同的項目。如果你打算這些持續時間是獨立的（5秒循環中的一個項目，15秒循環中的另一個項目等），那麼等待它完成的建議顯然不是一種選擇。在這種情況下，我會說你應該對每個動畫重新開始個別動畫的回調。