jQuery：爲什麼我不能重複這個動畫？

Question

HTML：

<div id="slider"> 
    <img src="images/02.jpg" alt="" class="two"> 
    <img src="images/01.jpg" alt="" class="one">  
    <img src="images/03.jpg" alt="" class="tri"> 
    <img src="images/04.jpg" alt="" class="four"> 
    <img src="images/05.jpg" alt="" class="five"> 
</div> 

CSS：

.one, .two, .tri, .four, .five {position: absolute;} 
.two {bottom: 0;} 
.tri {left: -348px;} 
.four {left: 348px; top: 19.8em;} 
.five {right: -257px;} 

這是動畫：

var one = $('.one'); 
var two = $('.two'); 
var tri = $('.tri'); 
var four = $('.four'); 
var five = $('.five'); 

$(two, tri, four, five).hide(); 

//first image 
$(one).animate({ 
     'top' : '-17.5em' 
    }, 8000, function() { 
     $(two).show(); 
     $(one).delay(6000).fadeOut(1500); 
    }); 

    //second image 
    $(two).delay(13700).animate({ 
     'bottom' : '-30.7em' 
    }, 11000, function() { 
     $(tri, four, five).show(); 
     $(two).delay(6000).fadeOut(1000); 
    }); 

    //third/fourth/fifth image 
    $(tri).delay(31500).animate({ 
     'left' : '0' 
    }, 600, function() { 
     $(tri).delay(6000).fadeOut(1000); 
    }); 

    $(four).delay(31500).animate({ 
     'top' : '0' 
    }, 600, function() { 
     $(four).delay(6000).fadeOut(1000); 
    }); 

    $(five).delay(31500).animate({ 
     'right' : '0' 
    }, 600, function() { 
     $(one).delay(5000).css({'top' : '0'}).fadeIn(); 
     $(five).delay(6000).fadeOut(1000); 
    }); 

（我試過把它變成回調函數，但不能使它工作，所以我使用延遲，我知道這是一個不同的問題，但如果任何人有任何想法爲什麼回調不起作用，請告訴）

無論如何，我試圖讓這個動畫無限期地重複。我試過setInterval，我試過把它放到一個函數中，然後再從內部調用它，通常我可以在網上找到任何可能的解決方案，但似乎沒有任何工作。 任何幫助，你可以給我將不勝感激。

Answer 1

嘗試這件事

var ctr = 0; 
function animate_me(){ 
++ctr; 
//your code; 
console.log('animating... #'+ ctr); 

//setTimeout(animate_me, 6000); 
setTimeout(animate_me, 1500); 
} 

$(function() { 
    animate_me(); 
});