Как зациклить слайд-шоу, используя .delay () и .queue ()?

Question

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

Вот скрипка: http://jsfiddle.net/CBWKa/

Проблема I 'm имеет то же самое, что и это: Моя рекурсивная функция setTimeout ускоряется, когда вкладка становится неактивной

Когда вы переключаете вкладки на несколько минут и переключаетесь назад, скорость анимации резко возрастает почти так же, какон пытается «догнать» себя.

Итак, я понял, что лучший способ обойти это - использовать .delay() и .queue(), а не функции setTimeout и setInterval javascript.,Однако я не могу понять, как использовать две функции для создания функции циклической анимации на нескольких элементах (не только на одном).

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

Спасибо.

Answer 1

Классический шаблон с .delay () и .queue () работает так:

$('element').animate(…).delay(timeout).queue(function(next){
    // do whatever you like after the timeout;
    next();
});

Для объединения ваших анимаций вы также можете использовать параметры обратного вызова из fadeIn и fadeOut. Э.Г.

$('some').delay(timeout).fadeOut('slow', function(){
    // do something after fading
});

---

Но, тем не менее, для хронометража в jQuery я всегда рекомендую плагин jquery-timer . Это упрощает объединение различных анимаций.

С помощью jquery-синхронизации ваш полный код цикла замирания может быть выполнен только одной строкой:

$('.slides img').repeat().each($).fadeIn().wait(2000).fadeOut();

Вот и все.