加載多個動畫時的jQuery無限循環

Question

我有一個加載文檔加載的動畫（請參閱代碼）的範圍，我希望這個循環一旦播放，我已經嘗試了一些技巧，但似乎無法做到正確，請你幫我一把！

$(function(){ 



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


//css set everything outside of the frame 



//animate in 

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#swooshOne').delay(11000).animate({ "opacity" : 1 }); 
$('img#swooshOneOverlay').css({ "right" : "-300px", "display" : "block" }).delay(11000).animate({ "left" : "-100px" }, 10000, function(){ $(this).hide(); $('img#swooshOne').hide(); }) ; 


//s11 
$('#ochreTextTwo').css({ "padding-left" : "50px" }).delay(22000).fadeIn(1000).delay(10000).fadeOut(500); 
$('img#swooshTwo').delay(22000).animate({ "opacity" : 1 }); 
$('img#swooshThree').delay(22000).animate({ "opacity" : 1 }); 
$('img#swooshTwoOverlay').css({ "right" : "-250px", "display" : "block" }).delay(22000).animate({ "left" : "-200px" }, 10000, function(){ $(this).hide(); $('img#swooshTwo, img#swooshThree').hide(); }) ; 


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

}）;

Answer 1

我不知道你已經嘗試了什麼，但是使用你已有的東西，把所有東西放在一個函數中，並在加載時調用該函數。在動畫的最後一步中，使用回調重新調用動畫。

$(function() { 

    // Make a function for your animation stuff 
    function doAnimation() { 
     //All of your animation stuff 

     // On your last animation step, use a callback to call the animation stuff again: 
     $('#ochreTextThree').css({ "padding-left" : "50px"}).delay(33000).fadeIn(1000).delay(10000).fadeOut(500, doAnimation) 

    } 

    // Call the first iteration of your animation loop: 
    doAnimation(); 

});