delay() not working as expected inside of each() loop (jQuery)

Question

I have a series of elements that I want to toggle in-and-out of view sequentially. I am using a to control this:

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.