強制執行jQuery UI轉換的順序

我正在使用Twitter引導程序和Ace Admin模板在網站上工作。下拉菜單是使用無序列表實現的，其中每個列表項都是下拉列表中的元素。強制執行jQuery UI轉換的順序

我的用戶要求是，下拉列表顯示通知列表，當通知被點擊時，通知列表將滑落，點擊通知的詳細信息將滑入到位。我將所有內容實現爲列表項並使用jquery-ui的隱藏和顯示函數來爲轉換設置動畫。

基本流程應該是：用戶點擊通知 - >通知列表已隱藏 - >顯示通知詳細信息。用戶點擊「返回詳細信息→隱藏通知詳情→顯示通知列表

出於某種原因，上述第一種情況正常，但第二種情況下，通知列表在細節出現之前開始顯示做被隱藏，導致父容器得到儘可能暫時都高可見

這裏是我有代碼：

$(".notification-item").click(function (e) { 
    e.stopPropagation(); 
    var guid = $(e.target).closest("li").attr("data-guid"); 

    $(".notification-item").hide("slide", { direction: "left" }, 250, function() { 
     // This is called when hiding is complete 
     // show the back button and detail for the correct notification 
     $("#notificationsBack").add("li#" + guid).show("slide", { direction: "right" }, 250);    
    }); 
}); 

$("#notificationsBack").click(function (e) { 
    e.stopPropagation(); 
    $(".notification-detail").hide("slide", { direction: "right" }, 250, function() { 
     // this functions should run after the hide is complete, but appears to start immediately 
     $(".notification-item").show("slide", { direction: "left" }, 250); 
    }); 
});

我已經posted a video of how this looks（與動畫放慢了更好的可視性）。

任何想法爲什麼在第二次轉換中隱藏動作在show動作開始之前沒有完成？

來源

2014-02-10 B Sharp

是不是有理由在'.hide（）'塊中放置'$（「。notification-item」）。show（...）'？ – royhowie

是的，它是在.hide完成時應該調用的回調函數中。函數聲明位於上面一行的末尾。 –

我知道，但那不是必要的。如果有的話，只要做'setTimeout（function（）{$（「。notification-item」）。show（「slide」，{direction：「left」}，250）}，250）;'如果你想確定它在另一個之後開始。 – royhowie

您需要強制.show()事件發生在另一個之後。最簡單的方法是：

$("#notificationsBack").click(function (e) { 
    e.stopPropagation(); 
    $(".notification-detail").hide("slide", { direction: "right" }, 250); 
    setTimeout(function(){ 
     $(".notification-item").show("slide", { direction: "left" }, 250); 
    }, 250); 
});

a setTimeout()調用。

來源

2014-02-10 18:46:31 royhowie

強制執行jQuery UI轉換的順序

回答

相關問題