Задержка() не работает, как ожидалось, внутри каждого цикла() jQuery

Question

У меня есть ряд элементов, которые я хочу последовательно переключать внутри и снаружи. Я использую <button class="toggle"> для управления этим:

$('.toggle').click(function(){ 
    $('.squares span').each(function(index){ 
     $(this).delay(600*index+1).toggleClass('hide'); 
    }); 
}); 

jsFiddle: http://jsfiddle.net/r2vk7L5b/

Оказывается, что метод delay() просто игнорируется в этом цикле. Переменная index передается так же, как ожидалось. Вы можете отключить его, чтобы увидеть его как 0,1,2,3 и т. Д.

Что я здесь не понимаю о методе each() или delay()?

Answer 1

toggleClass не один из JQuery-х animation (effects) functions (как fadeIn), и delay работает только с анимацией функции JQuery в. toggleClass и show и hide и несколько других основных функций) сразу, даже если есть задержки или другие эффекты, ожидающие обработки в очереди эффектов jQuery.

Для имитации delay с функцией без анимации, вы можете использовать setTimeout:

$('.toggle').click(function(){ 
    $('.squares span').each(function(index){ 
     var $this = $(this); 
     setTimeout(function() { 
      $this.toggleClass('hide'); 
     }, 600*index+1); 
    }); 
}); 

Updated Fiddle

Или поочередно, рассмотрите возможность использования функции анимации (эффектов).