在延遲後使用jQuery添加一個類

單擊一個元素時，我想向body元素添加一個類，但稍微延遲一下。因此，element1被點擊，然後在0.5秒後，身體被賦予一個新的類。在延遲後使用jQuery添加一個類

我用這裏面的工作在一定程度上...

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

不過，我還有一個click事件從體內清除該左BG類。

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

但是，接下來的時間.element1被點擊，它不會將左bg類應用於身體。

希望是有道理的。任何人都可以幫我解決這個問題，或者提出另一種解決方法嗎？

來源

2013-07-26 user2586455

清除隊列：

DEMO

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

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

來源

2013-07-26 10:07:58

這完美地工作，謝謝！ – user2586455

是的，應該總是嘗試清除隊列！ –

您需要使用.stop（）

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

DEMO

來源

2013-07-26 10:09:15 Anton

需要離隊

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

提到here

來源

2013-07-26 10:09:23

使用本 -

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-26 10:12:21

請記住，你的延遲可以導致問題： - 衝壓部件1 - 按另一個元素 - 刪除類 - 延遲添加類

，以確保所有工作正常，你要跟蹤到底是怎麼回事，以及爲你應該檢查如果類是已經體元件上，因此該類不適用了兩次：

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-26 10:14:31

設置後需要stop()身體。

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

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

Fiddle DEMO

來源

2013-07-26 10:17:40

在延遲後使用jQuery添加一個類

回答

相關問題