7

单击一个元素时，我想向 body 元素添加一个类，但会稍有延迟。因此，单击 element1，然后在 0.5 秒后，主体是一个给定的新类。

我正在使用这个在一定程度上有效......

$('.element1').click(function() {
    $('body').delay(500).queue(function(){
        $(this).addClass('left-bg')
    });
});

但是，我有另一个单击事件，它从正文中删除了这个 left-bg 类。

$('.another-element').click(function() {
    $('body').removeClass('left-bg');
});

但是下次单击 .element1 时，它根本不会将 left-bg 类应用于正文。

希望这是有道理的。有人可以帮我解决这个问题或建议另一种解决方法吗？

4

6 回答 6

10

清空队列：

演示

$('.element1').click(function() {
    $('body').delay(500).queue(function(){
        $(this).addClass('left-bg').clearQueue();
    });
});

$('.another-element').click(function() {
    $('body').removeClass('left-bg');
});
于 2013-07-26T10:07:58.490 回答
4

你需要出队

$('.element1').click(function() {
    $('body').delay(500).queue(function(){
        $(this).addClass('left-bg');
        $(this).dequeue()
    });
});

正如这里提到的

于 2013-07-26T10:09:23.993 回答
0

您需要使用 .stop()

$('.element1').click(function() {
    $('body').stop().delay(500).queue(function(){
        $(this).addClass('left-bg')
    });
});

演示

于 2013-07-26T10:09:15.043 回答
0

用这个 -

var bgch;
$('.element1').click(function() {
    bgch = setTimeout((function(){$('body').addClass('left-bg');}),500);
});
$('.another-element').click(function() {
    $('body').removeClass('left-bg');
    clearTimeout(bgch);
});
于 2013-07-26T10:12:21.700 回答
0

请记住，您的延迟可能会导致问题：-按元素1-按另一个元素-删除类-延迟后添加类

为了确保一切正常，您必须跟踪正在发生的事情，并且您应该检查类是否已经在 body-element 上，因此该类不会应用两次：

var bodyClassTracker = 0;
var handledClass = 'left-bg';

$('.element1').click(function() {
    bodyClassTracker = 1;
    $('body').delay(500).queue(function(){
        var eleBody = $('body');
        if (!eleBody.hasClass(handledClass))
            eleBody.addClass(handledClass);
        bodyClassTracker = 0;
        eleBody.clearQueue();
    });
});

$('.another-element').click(function() {
    var removerFun = function(){
            var eleBody = $('body');
            if (eleBody.hasClass(handledClass))
                eleBody.removeClass(handledClass);
            eleBody.clearQueue();
        };
    if (bodyClassTracker == 1)
        $('body').delay(500).queue(removerFun);
    else
        removerFun();
});

在这里您可以测试和演示代码。 http://jsfiddle.net/uTShk/3/

于 2013-07-26T10:14:31.253 回答
0

设置后需要stop()正文。

$('#add').click(function() {
    $('body').delay(500).queue(function(){
        $(this).addClass('left-bg')
    }).stop();
});

$('#rem').click(function() {
    $('body').removeClass('left-bg');
});

小提琴演示

于 2013-07-26T10:17:40.693 回答