jquery動畫無限次

Question

我有一個山，雲，太陽的背景圖像。我的想法是動畫背景繼續從右向左。

的Jquery：

$('#cloud-01').animate({backgroundPosition: '(-500px -80px)'}, 40000); 
$('#cloud-02').animate({backgroundPosition: '(-625px -30px)'}, 40000); 
$('#mountains-03').animate({backgroundPosition: '(-2500px 50px)'}, 40000); 
$('#ground').animate({backgroundPosition: '(-5000px bottom)'}, 40000); 

這是正常工作，但（鑑於時間）動畫40秒。之後停止。我需要的是給予持續的移動效果。

我不知道一旦它完成後如何重複這個動畫。任何人都可以幫助我。

在此先感謝。

Answer 1

您可以使用JavaScript setInterval函數以重複動畫...

var animationRef=setInterval(40,function(){ 
               /*call if animation if completed*/ 
               if ($(":animated").length === 0) { 
                animateBackground(); 
               } 

              } 
); 

var animateBackground =function(){ 
    $('#cloud-01').animate({backgroundPosition: '(-500px -80px)'}, 40000); 
    $('#cloud-02').animate({backgroundPosition: '(-625px -30px)'}, 40000); 
    $('#mountains-03').animate({backgroundPosition: '(-2500px 50px)'}, 40000); 
    $('#ground').animate({backgroundPosition: '(-5000px bottom)'}, 40000); 
}