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

Вы можете использовать яваскрипт 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); 
}