在上一個完成之後運行一行jQuery

我有兩行jQuery，在完成上一行之後需要運行一行。在上一個完成之後運行一行jQuery

我知道js是逐行讀取，但第二行發生得太快。

我不能使用jQuery回調，因爲這些功能很不幸沒有它們。

我試着做一個setTimeout()等待500ms，1000ms和1600ms，但它似乎沒有工作。在視覺上，第二行發生在第一行完成之前。

在第一個選擇器中使用的元素具有1s的css過渡，我希望完成，然後第二行發生。

是否有可能做這樣的事情：

如果轉換完成後，運行JS 否則等待，然後檢查是否過渡完成，那麼如果實際運行JS。

這裏是JS的兩行：

$('#searchInput').removeClass('slideBack').css('top', 0); 
$('#headerTopBar').css('position', 'relative').hide();

來源

2014-03-19 gomangomango

'的.css（）'是不是一個異步調用，因此第二隻喜歡完成後執行的第一行..除非你正在使用過渡css動畫 –

@ArunPJohny是的，我正在使用CSS過渡動畫。這就是爲什麼「transitionend」的答案有效。 – gomangomango

如果你想等待CSS過渡要完成，那麼您需要爲正在進行轉換的對象上的CSS transitionend事件使用eventListener。然後，這將提供一個事件處理函數回調，您可以在CSS轉換完成後執行第二行代碼。

$('#searchInput').one("transitionend", function(e) { 
    $('#headerTopBar').css('position', 'relative').hide(); 
}).removeClass('slideBack').css('top', 0);

現在，在現實世界中，並不是每一個瀏覽器使用相同的事件名稱爲過渡結束事件這樣一個通常是安裝事件處理程序代碼中的數字轉變結束事件的所有可能的名字或一個在本地瀏覽器中使用哪個名稱，然後將該變量用作事件名稱。

注意：我使用.one()，以便該事件處理程序在觸發後自動自動卸載。我不確定你是否想要這樣做，但通常對於這些類型的事件通知來說是可取的。

這裏有一個更詳細的版本，監聽所有可能的過渡結束事件名稱（所有主流瀏覽器）：

$('#searchInput').one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) { 
    $('#headerTopBar').css('position', 'relative').hide(); 
}).removeClass('slideBack').css('top', 0);

來源

2014-03-19 02:37:51 jfriend00

'.one（）'和'.on（）'有什麼區別？ – gomangomango

@gomangomango - 在我的回答中解釋了使用'.one（）'的原因，jQuery在['.one（）']（http://api.jquery.com/one/）上有完整的doc。 – jfriend00

哦，好的。謝謝你解釋。 – gomangomango

.css()不採取回調，您可以使用.animate()代替：

$('#searchInput').removeClass('slideBack').animate({top:0},500,function() { 
    $('#headerTopBar').css('position', 'relative').hide(); 
});

來源

2014-03-19 02:30:56 Felix

爲什麼你認爲在OP的情況下，第二行是在第一行完成之前執行的......可能出現的唯一問題是它是否正在進行css過渡......在這種情況下，此解決方案仍然不會解決問題 –

在上一個完成之後運行一行jQuery

回答

相關問題