очереди анимации на несколько элементов

Question

Я пытаюсь выяснить, как очереди анимации на несколько элементов с помощью jQuery.

Например, мне нужно перемещаться по элементу по экрану. Затем, когда это будет сделано, переместите следующий и т. Д.

Это, возможно, список предметов .. которые попадают на место .. один за другим.

Может ли кто-нибудь помочь мне?

Нужно ли мне прибегать к использованию функций onComplete каждой анимации, чтобы начать следующую?

Обновление: простой пример.

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul> 

Я хочу, чтобы каждый из них исчезал один за другим. SO Пункт 1 исчезает. Затем, когда это будет сделано, пункт 2 затухает и т. Д.

Я преобразовываю анимацию типа Flash «page build» в HTML с помощью jQuery. Поэтому мне нужно очереди анимации на несколько элементов. Как сделать коробку, и скользящий текст на нем .. и т. Д.

Answer 1

На самом деле все jQuerys fx methods (включая .animate()) предлагают complete callback. Это значит, что после завершения анимации вам нужно выполнить некоторые вещи non-fx.

Если вы просто хотите иметь различные fx эффекты исполнения в порядке, этого достаточно, чтобы цепи методы, как

$('object').fadeOut(3000).slideDown(2500).slideUp(1500); 

JQuery будет автоматически заботиться о вас в этом месте. Это переводится в вызов как

$('object').fadeOut(3000, function() { 
    // do something here 
    $(this).slideDown(2500, function() { 
     // do something here 
     $(this).slideUp(1500, function() { 
      // do something here 
     }); 
    }); 
}); 

обновление

В ссылке на Ваш комментарий, введите это в вашем Firebug или WebKit консоли:

$('div').slice(4, 9).fadeOut(3333).fadeIn(5555).slideUp(2000).slideDown(1000); 

Это будет работать на некотором верхнем DIV элементов со стороны Stackoverflow.

Answer 2

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

Скажите, что вы хотите потушить некоторые divs один за другим, и каждое затухание занимает 800 мс, тогда вы можете сразу начать первый, второй с задержкой в ​​800 мс (так начинается, когда остальные заканчиваются !), третья задержка 1600ms и так далее ...

автоматизированный пример для этого, что вы можете выполнить с поджигатель или WebKit консоли (понравился ваш пример идеи JANDY = D) является:

$('div.nav li').each(function(i, elem) { 
    $(elem).delay(i * 800).fadeOut(800); 
}); 

(запустите его, просматривая ссылки на навигацию: вопрос, теги, пользователи ...)

Answer 3

Paul Irish написал большую статью по этой теме:

http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

Для вашего замирания в примере, вы могли бы сделать:

(function showNext(jq){ 
jq.eq(0).fadeIn("fast", function(){ 
    (jq=jq.slice(1)).length && showNext(jq); 
}); 
})($('ul > li')) 

Отрегулировать по вкусу.