Как я могу анимировать несколько элементов последовательно с помощью jQuery?
Я второй подход 'Животных'!
Эта небольшая статья о JavaRanch, "То, как моя Собака изучила Полиморфизм", помогло мне много (это в значительной степени независимо от языка):
4 ответа
Вы можете выполнить несколько обратных вызовов.
$(".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");
});
});
});
});
Очередь работает только при анимации одного и того же элемента. Бог знает, почему за это проголосовали, но это не сработает.
Вам нужно будет использовать обратный вызов анимации. Вы можете передать функцию в качестве последнего параметра функции анимации, и она будет вызвана после завершения анимации. Однако, если у вас есть несколько вложенных анимаций с обратными вызовами, сценарий станет довольно нечитабельным.
Я предлагаю следующий за плагин, который перезаписывает встроенную функцию анимации jQuery и позволяет вам указать имя очереди. Все анимации, которые вы добавляете с одинаковым именем очереди, будут запускаться последовательно, как показано здесь .
Пример сценария
$("#1").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
$("#2").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
$("#3").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
Используйте параметр очереди :
$(".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" });
});
Вы также можете поместить свои эффекты в ту же очередь, т.е. в очередь элемента BODY.
$('.images IMG').ready(
function(){
$('BODY').queue(
function(){
$('.images').fadeTo('normal',1,function(){$('BODY').dequeue()});
}
);
}
);
Убедитесь, что вы вызываете dequeue() в последнем обратном вызове эффекта.