Как я могу анимировать несколько элементов последовательно с помощью jQuery?

Question

Я думал, что это будет просто, но я все еще не могу заставить его работать. Нажимая одну кнопку, я хочу, чтобы произошло несколько анимаций: один за другим - но теперь все анимации происходят сразу. Вот мой код - может кто-то пожалуйста, скажите мне, где я буду неправильно ?:

$(".button").click(function(){ 
    $("#header").animate({top: "-50"}, "slow") 
    $("#something").animate({height: "hide"}, "slow") 
    $("ul#menu").animate({top: "20", left: "0"}, "slow") 
    $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow"); 
}); 

Answer 1

Вы можете сделать кучу обратных вызовов.

$(".button").click(function(){ 
    $("#header").animate({top: "-50"}, "slow", function() { 
     $("#something").animate({height: "hide"}, "slow", function() { 
      $("ul#menu").animate({top: "20", left: "0"}, "slow", function() { 
       $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");   
      }); 
     }); 
    }); 
}); 

Answer 2

Используйте опцию queue:

$(".button").click(function(){ 
    $("#header").animate({top: "-50"}, { queue: true, duration: "slow" }) 
    $("#something").animate({height: "hide"}, { queue: true, duration: "slow" }) 
    $("ul#menu").animate({top: "20", left: "0"}, { queue: true, duration: "slow" }) 
    $(".trigger").animate({height: "show", top: "110", left: "0"}, { queue: true, duration: "slow" }); 
}); 

Answer 3

Очередь работает только, если ваш анимировать тот же элемент. Господь знает, почему выше было проголосовано, но это не сработает.

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

Я предлагаю плагин following, который перезаписывает собственную функцию анимации jQuery и позволяет указать имя очереди. Все анимации, которые вы добавляете с одинаковым именем очереди, будут выполняться последовательно, как показано на рисунке here.

Пример сценария

$("#1").animate({marginTop: "100px"}, {duration: 100, queue: "global"}); 
    $("#2").animate({marginTop: "100px"}, {duration: 100, queue: "global"}); 
    $("#3").animate({marginTop: "100px"}, {duration: 100, queue: "global"}); 

Answer 4

Вы также можете поместить свои эффекты в одну и ту же очередь, то есть в очередь элемента BODY.

$('.images IMG').ready(
    function(){ 
     $('BODY').queue(
      function(){ 
       $('.images').fadeTo('normal',1,function(){$('BODY').dequeue()}); 
      } 
     ); 
    } 
); 

Убедитесь, что вы вызываете dequeue() в течение последнего обратного вызова эффекта.

Answer 5

Это уже ответили хорошо (я думаю, что ответ jammus является лучшим), но я думал, что обеспечит еще один вариант, основанный на том, как я могу сделать это на моем сайте, с помощью функции delay() ...

$(".button").click(function(){ 
    $("#header").animate({top: "-50"}, 1000) 
    $("#something").delay(1000).animate({height: "hide"}, 1000) 
    $("ul#menu").delay(2000).animate({top: "20", left: "0"}, 1000) 
    $(".trigger").delay(3000).animate({height: "show", top: "110", left: "0"}, "slow"); 
}); 

(замените 1000 на требуемую скорость анимации. Идея заключается в задержке функции задержки на эту сумму и накапливает задержку в анимации каждого элемента, поэтому, если ваша анимация составляла каждые 500 миллисекунд, ваши значения задержки были бы 500, 1000, 1500)

Редактирование: «медленная» скорость FYI jQuery также равна 600 миллисекунд. поэтому, если вы хотите использовать «медленные» все еще в своей анимации, просто используйте эти значения в каждом последующем вызове функции задержки - 600, 1200, 1800

Answer 6

Расширение ответа на jammus, возможно, это немного более практично надолго последовательности анимаций. Отправляйте список, оживляя каждый поочередно, рекурсивно вызывая ожидание снова с уменьшенным списком. Выполните обратный вызов, когда все будет завершено.

Список выбранных элементов, но это может быть список более сложных объектов, содержащих разные параметры анимации для каждой анимации.

Here is a fiddle

$(document).ready(function() { 
    animate([$('#one'), $('#two'), $('#three')], finished); 
}); 

function finished() { 
    console.log('Finished'); 
} 

function animate(list, callback) { 
    if (list.length === 0) { 
     callback(); 
     return; 
    } 
    $el = list.shift(); 
    $el.animate({left: '+=200'}, 1000, function() { 
     animate(list, callback); 
    }); 
} 

Answer 7

Я знаю, что это старый вопрос, но он должен быть обновлен с ответом на новые версии JQuery (1.5 и выше):

Используя функцию $.when вы можете написать этот помощник:

function queue(start) { 
    var rest = [].splice.call(arguments, 1), 
     promise = $.Deferred(); 

    if (start) { 
     $.when(start()).then(function() { 
      queue.apply(window, rest); 
     }); 
    } else { 
     promise.resolve(); 
    } 
    return promise; 
} 

Тогда вы можете назвать это так:

queue(function() { 
    return $("#header").animate({top: "-50"}, "slow"); 
}, function() { 
    return $("#something").animate({height: "hide"}, "slow"); 
}, function() { 
    return $("ul#menu").animate({top: "20", left: "0"}, "slow"); 
}, function() { 
    return $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");   
}); 

Answer 8

Небольшое улучшение на ответ @ schmunk является используйте очередь объектов jQuery для простого объекта, чтобы избежать конфликта с другими несвязанными анимациями:

$({}) 
    .queue(function (next) { 
     elm1.fadeOut('fast', next); 
    }) 
    .queue(function (next) { 
     elm2.fadeIn('fast', next); 
    }) 
    // ... 

Следует иметь в виду, что, хотя у меня никогда не возникало проблем с этим, согласно the docs с использованием методов очереди на обертке простого объекта официально не поддерживается.

Работа с Plain объектов

В настоящее время единственные операции, поддерживаемые на простых объектов JavaScript, завернутые в JQuery являются: .data() ,. проп() ,. Bind(), .unbind() , .trigger() и .triggerHandler().

Answer 9

анимировать несколько Теги Последовательная

Вы можете использовать JQuery встроенный в анимации очереди, если вы просто выбрать тег как тело, чтобы сделать глобальную очередями:

// Convenience object to ease global animation queueing 
$.globalQueue = { 
    queue: function(anim) { 
     $('body') 
     .queue(function(dequeue) { 
      anim() 
      .queue(function(innerDequeue) { 
       dequeue(); 
       innerDequeue(); 
      }); 
     }); 

     return this; 
    } 
}; 

// Animation that coordinates multiple tags 
$(".button").click(function() { 
    $.globalQueue 
    .queue(function() { 
     return $("#header").animate({top: "-50"}, "slow"); 
    }).queue(function() { 
     return $("#something").animate({height: "hide"}, "slow"); 
    }).queue(function() { 
     return $("ul#menu").animate({top: "20", left: "0"}, "slow"); 
    }).queue(function() { 
     return $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow"); 
    }); 
}); 

http://jsfiddle.net/b9chris/wjpL31o0/

Так , вот почему это работает, и что он делает:

1. Звонок в $.globalQueue.queue() просто вызывает вызов анимации вашего тега, но он ставит его в очередь на теге тела.

2. Когда jQuery удаляет анимацию вашего тега в очереди на тело, анимация вашего тега начинается в очереди для вашего тега, но, как работает анимационная среда jQuery, любой пользовательский обратный вызов анимации вызывает очередь анимации тега (тело в этот случай) для остановки, пока пользовательская анимация не вызовет функцию переданного dequeue(). Таким образом, даже если очереди для вашего анимированного тега и тела являются отдельными, очередь тегов тела теперь ждет своего вызова dequeue(). http://api.jquery.com/queue/#queue-queueName-callback

3. Мы просто делаем последним в очереди элемента в очереди тега вызова для продолжения глобальной очереди, вызвав функцию dequeue() - это то, что связывает очередь вместе.

4. Для удобства метод globalQueue.queue возвращает ссылку this для легкой цепочки.

setInterval

Для полноты картины, это легко приземлиться здесь просто ищет альтернативу setInterval - то есть вы не столько ищет, чтобы сделать отдельные анимации координат, а просто стрелять их на без неожиданного перенапряжения в вашей анимации, вызванной тем, что новые браузеры будут откладывать очереди анимации и таймеры для экономии процессора.

Вы можете заменить вызов setInterval так:

setInterval(doAthing, 8000); 

С этим:

/** 
* Alternative to window.setInterval(), that plays nicely with modern animation and CPU suspends 
*/ 
$.setInterval = function (fn, interval) { 
    var body = $('body'); 
    var queueInterval = function() { 
     body 
     .delay(interval) 
     .queue(function(dequeue) { 
      fn(); 
      queueInterval(); 
      dequeue(); // Required for the jQuery animation queue to work (tells it to continue animating) 
     }); 
    }; 
    queueInterval(); 
}; 

$.setInterval(doAthing, 8000); 

http://jsfiddle.net/b9chris/h156wgg6/

И избежать этих неудобных взрывов анимации, когда вкладка фон имеет анимацию повторно включен браузером.