How can one set a sequential delay on adding a cla

Question

I'm using jQuery UI plugin and the latest jQuery.

I would like to sequentially add on the class, one by one down my array of elements. Right now I have this :

$(@el).addClass("gridBoxComplete", 400, "easeOutBounce").delay(800)

Where @el is the current element in the array. This, however, does not delay this object before the next item in the iteration is run. I based this animation roughly off of this idea..

$(@).hide().each (index) ->
  $(@)
    .delay(index * 100)
    .fadeIn 500

Answer 1

delay() delays animations, not classname changes or other code executions. If you want generic execution delay, use setTimeout or something like:

$.fn.wait = function(ms, callback) {
  return this.each(function() {
    setTimeout(callback.bind(this), ms)
  })
}

$(@el).addClass("gridBoxComplete", 400, "easeOutBounce").wait(800, function() {
    $(this).addClass("something");
});