delay() not working as expected inside of each() l

Question

I have a series of elements that I want to toggle in-and-out of view sequentially. I am using a <button class="toggle"> to control this:

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

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

It appears that the delay() method is simply being ignored in this loop. The index variable is being passed as expected as well. You can console out to see it returning as 0,1,2,3, etc.

What here am I failing to understand about the each() or delay() method?

Answer 1

toggleClass isn't one of jQuery's animation (effects) functions (like fadeIn), and delay only works with jQuery's animation functions. toggleClass (and show and hide and several other basic functions) are done immediately, even if there's a delay or other effects pending in the jQuery effects queue.

To simulate delay with a non-animation function, you can use setTimeout:

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

Updated Fiddle

Or alternately, consider using an animation (effects) function.