jquery - Jquery动画无限次

Question

我有一个带有山丘、云彩和太阳的背景图像。我的想法是为背景设置动画以继续从右到左。

查询：

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