我可以延遲jQuery addClass嗎？

Question

有沒有辦法延遲jQuery的addClass()？例如該代碼

$('#sampleID').delay(2000).fadeOut(500).delay(2000).addClass('aNewClass'); 

當我加載網頁，它具有類的aNewClass「已經在ID「sampleID」。如何解決這個問題呢？我想要的是addClass將在結束​​後發生。

Answer 1

我想是的addClass將 發生它結束的淡出（）後。

您可以使用callback function to fadeOut這樣的：

$('#sampleID').fadeOut(500, function(){ 
    $(this).addClass('aNewClass'); 
}); 

Answer 2

您應該使用回調。

$('#sampleID').delay(2000).fadeOut(500,function(){ 
    $(this).delay(2000).addClass('aNewClass'); 
}); 

http://api.jquery.com/fadeOut/

Answer 3

你不能用delay做到這一點，因爲它不僅影響效果隊列。如果沒有使用隊列實現它，它不會「暫停」後面代碼的執行。

您需要setTimeout做到這一點：

$('#sampleID').delay(2000).fadeOut(500, function() { 
    setTimeout(function() { 
     $(this).addClass('aNewClass'); 
    }, 2000); 
}); 

它使用complete回調fadeOut，然後將在未來執行2秒的功能。

Answer 4

不能直接耽誤了addClass電話，但是你可以，如果你把它包裝在一個隊列調用，它需要一個功能像這樣

$(this).delay(2000).queue(function(){$(this).addClass('aNewClass')}); 

參數請參閱此帖子：jQuery: Can I call delay() between addClass() and such?

Answer 5

您還可以使用setTimeout的，用CSS過渡：

setTimeout(function() { 
    $('#sampleID').addClass('aNewClass'); 
}, 2000); 

而CSS

#sampleID { 
transition: opacity 1s ease; 
opacity: 0; 
} 

#sampleID.aNewClass { 
opacity: 1; 
}