jquery each add class with delay inbetween

Question

I need to loop through each div .row to add or remove a flip class that has a CSS3 3D transform effect.

When I apply this add/remove class to each \".row\" with jquery e

Answer 1

The addClass function isn't an animation function, so it doesn't get queued, and so runs immediately without waiting for the .delay() to finish.

I use this extension to queue non-animated jQuery calls:

(function($) {
    $.fn.queued = function() {
        var self = this;
        var func = arguments[0];
        var args = [].slice.call(arguments, 1);
        return this.queue(function() {
            $.fn[func].apply(self, args).dequeue();
        });
    }
}(jQuery));

which in your code would be called thus:

$('.row').each(function(i){
    $(this).delay(i*500).queued('toggleClass', 'flip');
}

NB: using toggleClass instead of a conditional add/remove.