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

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

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

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

recursive_animation();

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

Answer 2

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

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

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

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

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