Geek asks and answers

Jquery each adds a class with a delay between them

I need to go 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" using jquery each (), all divs get the ".flip" class, added or removed at the same time. I need it to be delayed, so it looks like a domino effect.

Any idea how I can make this work? Or how to add / remove a flip class one at a time?

This is what I found, but it does not work:

  $('.row').each(function(i){
    if($(this).hasClass('flip')){
      $(this).delay(i*500).removeClass('flip');
    }else{
      $(this).delay(i*500).addClass('flip');
    }
  });
+5
source share
3 answers

jQuery delay() , $(obj).delay(500).addClass('flip'); . ( , )

setTimeout().

$('.row').each(function(i){
  var row = $(this);
  setTimeout(function() {
    row.toggleClass('flip');
  }, 500*i);
});​

Fiddle

+17

setTimeout delay.

jsFiddle: http://jsfiddle.net/xQkmB/1/

var i = 0;
var rows = $(".row");
show();

function show() {
    if (i < rows.length) {
        $(rows[i]).show();
        i++;
        setTimeout(show, 1000);
    }       
}
+3

addClass , , .delay().

jQuery:

(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));

:

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

: toggleClass /.

+1

More articles:


All Articles