анимация в очереди на нескольких элементах - PullRequest
Новая
       30

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

1 голос
/ 03 февраля 2011

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

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

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

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

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

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

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

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

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

Ответы [ 3 ]

5 голосов
/ 03 февраля 2011

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

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

Автоматический пример для этого, который вы можете выполнить с помощью firebug или webkit console (понравилась идея вашего примера jAndy! = D): 

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

(выполнить просмотр по ссылкам навигации: Вопрос, Теги, Пользователи ...)

1 голос
/ 19 апреля 2011

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'))

Настроить навкус.

0 голосов
/ 03 февраля 2011

На самом деле все jQuerys fx methods (включая .animate()) предлагают complete callback. Это когда вам нужно выполнить некоторые не-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.

...