Задержка между анимациями

Question

Я пытаюсь добавить задержку в начале каждого набора анимаций. Анимация отлично работает, но когда я добавляю .delay (5000) до .animate, ничего не работает.

$(document).ready(function(){ 

    -->add .delay here <--- 

    $("#hand").animate({left:'-=300px'},1500); 
    $("#hand").animate({left:'+=300px'},1000); 

    -->add .delay here <--- 

    $("#hand").animate({left:'-=300px'},1500 ); 
    $("#hand").animate({left:'+=300px'},1000); 

    $("#hand").animate({left:'-=300px'},1500 ); 
    $("#hand").animate({left:'+=300px'},1000); 

    }); 

Есть ли один код для использования для этой же функции здесь? Мне нужно, чтобы он анимировал бесконечно.

Answer 1

Вы должны могут использовать цепочки для анимации/задержки вызовов - пример:

$("#hand").animate({left:'-=300px'},1500) 
      .delay(5000) 
      .animate({left:'+=300px'},1500); 

Обратите внимание, что сам animate() вызов неблокирующая поэтому вы должны приспособить для этого в delay() вызова или вместо этого переместите код в обработчик завершения. См. Это working JSFiddle example.

Чтобы сделать это запустить «навсегда», вы можете просто обернуть его в setInterval():

setInterval(function() { 
    $("#hand").animate({ left: '-=300px'}, 1500) 
       .delay(5000) 
       .animate({left: '+=300px'}, 1000); 
}, 10000); 

Answer 2

Вы можете сделать вызов рекурсивной функции, чтобы сделать свой цикл анимации бесконечно.

function recursive_animation() { 
    $("#hand").delay(3000) 
     .animate({left:'-=300px'},1500) 
     .animate({left:'+=300px'},1000, recursive_animation); 
} 

recursive_animation(); 

Пример:http://jsfiddle.net/j3LLe/