jquery函數只循環兩次（應該是無限的）

Question

Hello Stack我有下面的代碼，它似乎只循環一次，我似乎無法解決它爲什麼不會循環無限。

你知道最新的錯嗎？

這裏是演示：http://www.prosperitymedia.co.uk/other/

$(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(); 

}); 

Answer 1

... 
    setInterval(doAnimation, 1000);  
}); 

這將設定，讓doAnimation運行每1秒（減少1000以減小的長度間隔 - 500將是半秒，100將是十分之一秒等）

Answer 2

這是因爲你只調用main函數一次，並在它你只調用doAnimation（）函數的兩倍。一旦你宣佈它，並且一次之後。

Answer 3

您只需撥打doAnimation();一次，因此只能運行一次。

在doAnimation函數結束的呼叫添加到doAnimation()無限循環：

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


     //Call function again to loop 
     doAnimation(); 
    } 

    doAnimation(); 

});