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);
});

它有效，但它是一个黑客：我不想在动画时改变不透明度，我不需要额外的超时隐藏。 我发现jQuery UI库已经扩展了show和hide方法，但是我不希望仅为一次调用引用这个库。我知道有一个WinJS.UI.Flyout执行类似的操作，但它不适用于我的情况。任何想法如何做到这一点？

Answer 1

问题是jQuery默认情况下不会将hide动画放入其动画队列中。这就是为什么我的初始代码首先隐藏html元素然后为其设置动画。解决方案是使用显式指定hide调用应该排队的参数调用hide：

panelContainer.hide({queue: true});