jQuery с использованием delay () с $ .each () не работает

Question

У меня разные классы, каждый с разным фоном. Я пытаюсь переключать фон на div #elm каждые 2 секунды. Почему следующее не задерживает 2 секунды между каждым индексом. Они все приходят сразу.

var classes = ['class1', 'class2', 'class3'];
$.each(classes, function(index, val) {
    $('#elm').removeAttr('class').addClass(val).delay(2000*index);
});

http://jsfiddle.net/bLHqP/

Answer 1

delay() работает только на эффекты.

Из jQuery Задержка () Документация

.delay () метод лучше всего подходит для задержка между очередями JQuery последствия. Потому что это ограничено - это например, не предлагает способ отменить задержку - .delay () не является замена для родного JavaScript функция setTimeout, которая может быть больше подходит для определенных случаев использования.

Поскольку addClass() не является эффектом, вы можете включить эффект fadeIn () и использовать addclass в качестве функции обратного вызова.

var classes = ['class1', 'class2', 'class3'];
$.each(classes, function(index, ui) {
    $('body').removeAttr('class').delay(1000).fadeIn(function() {
        $(this).addClass(ui);
    });
});

Проверьте рабочий пример на http://jsfiddle.net/8e3Rm/

Answer 2

Разве метод задержки не применяется только для событий, использующих очередь эффектов, таких как исчезновение и исчезновение и т. Д .?

Answer 3

РЕДАКТИРОВАТЬ:

это работает:

for (var i = 0; i < classes.length; i++) {
    setTimeout (    
        (function(index){
        return function(){
            $('#elm').removeAttr('class').addClass(classes[index]);
        };
        })(i), 2000*i);
}