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); 
}