【问题标题】:jQuery using delay() with $.each() not workingjQuery 使用 delay() 和 $.each() 不工作
【发布时间】:2011-07-26 12:47:25
【问题描述】:

我有不同的班级,每个班级都有不同的背景。我正在尝试每 2 秒切换一次 div #elm 的背景。为什么以下每个索引之间没有延迟 2 秒。他们都同时进来。

var classes = ['class1', 'class2', 'class3'];
$.each(classes, function(index, val) {
    $('#elm').removeAttr('class').addClass(val).delay(2000*index);
});

http://jsfiddle.net/bLHqP/

【问题讨论】:

  • delay 用于效果队列,不适用于此

标签: jquery delay each


【解决方案1】:

编辑:

这行得通:

for (var i = 0; i < classes.length; i++) {
    setTimeout (    
        (function(index){
        return function(){
            $('#elm').removeAttr('class').addClass(classes[index]);
        };
        })(i), 2000*i);
}

【讨论】:

  • 那行不通。无需在 each() 中发布自执行函数。检查我在问题中发布的 jsfiddle 示例。
【解决方案2】:

延迟方法不是只针对使用效果队列的事件,比如淡入淡出等吗?

【讨论】:

    【解决方案3】:

    delay() 仅适用于效果。

    来自 jQuery delay() 文档

    .delay() 方法最适合 排队的jQuery之间的延迟 效果。因为它是有限的——它 例如,没有提供一种方法 取消延迟——.delay() 不是 替代 JavaScript 的原生 setTimeout 函数,可能更多 适用于某些用例。

    由于addClass() 不是效果,您可以包含一个fadeIn() 效果并使用addclass 作为回调函数。

    var classes = ['class1', 'class2', 'class3'];
    $.each(classes, function(index, ui) {
        $('body').removeAttr('class').delay(1000).fadeIn(function() {
            $(this).addClass(ui);
        });
    });
    

    http://jsfiddle.net/8e3Rm/查看工作示例

    【讨论】:

      猜你喜欢
      • 2011-06-08
      • 1970-01-01
      • 1970-01-01
      • 2011-07-20
      • 1970-01-01
      • 1970-01-01
      • 2019-04-16
      • 1970-01-01
      • 2017-01-11
      相关资源
      最近更新 更多