jQuery 使用delay() 和$.each() 不起作用

发布于 10-28 11:34 字数 355 浏览 2 评论 0原文

我有不同的班级,每个班级都有不同的背景。我试图每 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/

I have different classes each with a different background. I'm trying to switch background on div #elm every 2 seconds. Why is the following not delaying 2 seconds between each index. They all come in at once.

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

http://jsfiddle.net/bLHqP/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

深海不蓝2024-11-04 11:34:29

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/

delay() only works on effects.

From jQuery delay() documantation

The .delay() method is best for
delaying between queued jQuery
effects. Because it is limited—it
doesn't, for example, offer a way to
cancel the delay—.delay() is not a
replacement for JavaScript's native
setTimeout function, which may be more
appropriate for certain use cases.

Since addClass() is not an effect, you can include a fadeIn() effect and use addclass as a callback function.

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

Check working example at http://jsfiddle.net/8e3Rm/

如若梦似彩虹2024-11-04 11:34:29

延迟方法不是仅适用于使用效果队列的事件,例如淡入和淡出等吗?

Isn't the delay method only for events that use the effects queue, like fading in and out, etc.?

乱了心跳2024-11-04 11:34:29

编辑:

这有效:

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

EDIT:

this works:

for (var i = 0; i < classes.length; i++) {
    setTimeout (    
        (function(index){
        return function(){
            $('#elm').removeAttr('class').addClass(classes[index]);
        };
        })(i), 2000*i);
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文