javascript - jQuery动画元素并隐藏

我正在用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);
});

它可以工作，但它是一个黑客：我不想改变不透明度时，动画，我不需要有额外的超时隐藏。
我发现jQuery UI库已经扩展了show和hide方法，但是我不想只为一个调用引用这个库。我知道有一个WinJS.UI.Flyout执行类似的操作，但它不适用于我的情况。你知道怎么做吗？

最佳答案

问题是jQuery默认情况下不会将hide动画放入其动画队列。这就是为什么我的初始代码是先隐藏html元素，然后设置它的动画。解决方案是使用明确指定hide调用应排队的参数调用hide：
panelContainer.hide({queue: true});