將延遲應用於動畫jquery

Question

我想向我的html中的div添加一個類，但希望在此之前添加延遲。 我已經得到了下面的代碼，但它似乎沒有應用任何種類的延遲。任何人都可以告訴我我做錯了什麼？

$("#globe").on('ended',function() { 
    setTimeout(
    $('.faculty-info').addClass('cbp-spmenu-open'), 
    5000); 
}); 

Answer 1

setTimeout需要一個函數定義爲第一個參數，所以包無論你想在一個匿名函數做這樣波紋管

setTimeout(function(){ 
    $('.faculty-info').addClass('cbp-spmenu-open') 
}, 5000); 

Answer 2

您shoudl包裝你的代碼（在延遲的方式來執行的指令）在function。

$("#globe").on('ended',function() { 
    setTimeout(function() { 
    $('.faculty-info').addClass('cbp-spmenu-open') 
    }, 5000); 
}); 

您可能還需要聲明一個變量來保存超時值。這會給你清除它的可能性，一旦您需要：

//Global timeout variable 
var timeOut; 

$("#globe").on('ended',function() { 
    timeOut = setTimeout(function() { 
    $('.faculty-info').addClass('cbp-spmenu-open') 
    }, 5000); 
}); 

Answer 3

您可以使用jQuery的.delay()和.queue()來處理這個問題：

$("#globe").on('ended', function() { 
    $('.faculty-info').delay(5000).queue(function() { 
     $(this).addClass('cbp-spmenu-open').dequeue(); 
    }); 
}); 

Here's a JSFiddle。另請參閱：jQuery: Can I call delay() between addClass() and such?