Последовательная анимация нескольких тегов
Вы можете использовать встроенную в jQuery очередь анимации, если вы просто выберете тег вроде body для создания глобальной очереди:
// 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/
Итак, вот почему это работает, и что он делает:
Вызов $.globalQueue.queue() просто ставит в очередь вызов анимации вашего тега, но ставит его в очередь в теге body.
Когда jQuery попадает в анимацию вашего тега в очереди тела, анимация вашего тега запускается в очереди для вашего тега - но, как работает инфраструктура анимации jQuery, любой пользовательский обратный вызов анимации вызывает очередь анимации тега (тело в этом случае) для остановки, пока пользовательская анимация не вызовет переданную функцию dequeue(). Таким образом, хотя очереди для вашего анимированного тега и тела разделены, очередь тега тела теперь ожидает вызова dequeue(). http://api.jquery.com/queue/#queue-queueName-callback
Мы просто делаем последний элемент очереди в очереди тега вызовом для продолжения глобальной очереди, вызывая его функцию dequeue() - это то, что связывает очереди вместе.
Для удобства метод 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/
И избегайте тех неуклюжих звуков анимации, когда на вкладке фона анимации повторно включены браузером.