How can one set a sequential delay on adding a class?

问题

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

回答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");
});

来源：https://stackoverflow.com/questions/13213214/how-can-one-set-a-sequential-delay-on-adding-a-class