jQuery動畫元素並隱藏

Question

我正在用JavaScript構建Windows 8應用程序。 我想做的是將html元素滑出屏幕，然后將其“ display”屬性更改為“ none”：

var panelContainer = $('#panelContainer');
panelContainer.animate({ right: '-400px' }, 200, function () {
    panelContainer.hide();
});

但是這段代碼無法正常工作：它只是立即隱藏了沒有動畫的元素。 我也嘗試過：

var panelContainer = $('#panelContainer');
panelContainer.animate({ right: '-400px' }, 200, function () {
    panelContainer.hide(200);
});

並且它可以工作，但這是一個hack：我不想在設置動畫時更改不透明度，也不需要額外的超時來隱藏。 我發現jQuery UI庫已經擴展了執行該操作的show和hide方法，但是我不想只為一個調用引用該庫。 我知道有一個WinJS.UI.Flyout執行類似的操作，但是不適用於我的情況。 任何想法如何做到這一點？

Answer 1

問題在於，jQuery默認不會將hide動畫放入其動畫隊列中。 這就是為什么我的初始代碼先隱藏html元素然后對其進行動畫處理的原因。 解決該問題的方法是使用明確指定應將hide呼叫排隊的參數調用hide：

panelContainer.hide({queue: true});