Как связать анимацию jQuery с паузой?

Question

Привет Я пытаюсь сделать простую анимацию цепи в jQuery с паузой (setTimeout) между каждым фреймом.

Скажите, что каждый div оживляет с продолжительностью 3500. Я хотел бы контролировать продолжительность между кажущимися непрозрачностью в анимации. Скажем, между первым div и 2-м div продолжительность составляет 5 секунд, а может быть 10 секунд между 2-м и 3-м кадрами.

Как бы вы это сделали?

http://codepen.io/leongaban/pen/Feroh

Текущий код

$('#blue').animate({ 
      opacity: '1' 
     }, 3500, function(){ 

     // Need 5 sec pause here    

     $('#blue').fadeOut('fast'); 
     $('#orange').animate({ 
      opacity: '1' 
      }, 3500, function(){ 

       // Need a 10 sec pause here 

       $('#orange').fadeOut('fast'); 
       $('#green').animate({ 
       opacity: '1' }, 3500); 

      }); 
     }); 

Answer 1

Вот что delay() и queue() для:

$('#blue').animate({opacity: '1'}, 3500).delay(5000).queue(function() { 
    $(this).fadeOut('fast'); 
    $('#orange').animate({opacity: '1'}, 3500).delay(10000).queue(function() { 
     $(this).fadeOut('fast'); 
     $('#green').animate({opacity: '1'}, 3500); 
    }); 
}); 

FIDDLE

Answer 2

Вы можете использовать методы JQuery FADEOUT/FadeIn с обратными вызовами.

Для получения дополнительной информации см. here.

Но по существу есть;

$(".myClass").fadeOut(1000, function() { 
    //fadeOut complete 
}); 

Первый аргумент - это время (в мс), пока оно полностью не исчезнет. По прошествии этого времени срабатывает обратный вызов. Поэтому вы можете с уверенностью предположить, что когда обратный вызов срабатывает, ваше необходимое время ожидания завершено.

Это тот же синтаксис для fadeIn, но я предлагаю прочитать ссылку, которую я предоставил. Это объяснит это подробнее.

Answer 3

Это именно то, что .delay() для (http://api.jquery.com/delay/). Это позволяет писать элегантные цепочки анимации для отдельных элементов, как это:

$("#foo").slideUp(300).delay(800).fadeIn(400); 

Обратите внимание, что вам все равно нужно использовать обратные вызовы для запуска анимации для других объектов, хотя.

В вашем случае, это должно быть это (непроверенные):

$('#blue') 
    .animate({ opacity: '1' }, 3500) 
    .delay(5000) 
    .fadeOut('fast', 
      function() { 
       $('#orange') 
        .animate({ opacity: '1' }, 3500) 
        .delay() 
        .fadeOut('fast', 
           function() { 
            $('#green') 
             .animate({ opacity: '1' }, 3500); 
           }); 
      });