Question

我有3个div元素，类名gridbox 我想在延迟的所有3个元素中添加一个类。

例如：

新类应添加到所有3个div元素中，每个元素之间有延迟。

我跟踪代码无效。

$('.gridbox').addClass('animation').delay(1500);

这里有什么问题？

Answer 1

您可以尝试这样的事情：

var divs = $( '.gridbox' );
var index = 0;

var delay = setInterval( function(){
  if ( index <= divs.length ){
    $( divs[ index ] ).addClass( 'animation' );
    index += 1;
  }else{
    clearInterval( delay );
  }
}, 1500 );

我在这里做的是：

提取所有元素并将其存储在divs变量中。
保存您当前使用的元素的索引。
启动setTimeout功能，延迟时间为1.5秒。
如果我们不在元素列表的末尾，请在将类转换为jQuery元素后将其添加到相关元素。
增加索引变量。
迭代完所有元素后停止setTimeout。

Answer 2

$('.gridbox').each(function(i) {
    (function(self, j) {
        setTimeout(function() {
            $(self).addClass('animation');
        },(j*1500)+1500);
    })(this, i);
});

FIDDLE

Answer 3

您可以尝试.each()和setTimeout

的组合

$('.gridbox').each(function (index) {
    var $this = $(this);
    setTimeout(function () {
        $this.addClass('animation');
    }, 1500 * index );
});

Fiddle DEMO

Answer 4

$('.gridbox').each(function(index) {
  var that = this;
  setTimeout(function() {
    $(that).addClass('animation');
  }, 1500 * index);
});

Answer 5

如果你想在jquery函数（如addClass）上应用延迟，你需要使用javascript setTimeout，因为所描述的here .delay()是有限的，应该用于jQuery效果

Answer 6

更好的解决方案：）

var st = setInterval(function(){
    var gb = $('.gridbox:not(.animation):eq(0)');
    gb.length > 0 ? gb.addClass('animation') : clearInterval(st);
},1500)

http://jsfiddle.net/jR984/

Answer 7

您可以在没有jQuery的情况下执行此操作

function addClass () {
  var div = document.getElementsByClassName("aaa");
  div[0].className = "bbb";
  setTimeout(addClass, 1000);
}
window.onload = function () {
  addClass();
}

http://jsfiddle.net/khGCv/

Answer 8

虽然setTimeout / Interval有点“工作”，但jquery提供了一种更清晰的自定义动画方式：queue，例如：

$(".gridbox").each(function() {
    var box = this;
    $("body").queue(function(next) {
        $(box).addClass("animation");
        next();
    }).delay(1000)
});

jquery将类添加到具有延迟的多个元素

8 个答案: