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