javascript - jQuery动画元素和隐藏

Question

我正在用 JavaScript 构建 Windows 8 应用程序。我想要做的是将 html 元素滑出屏幕，然后将其“显示”属性更改为“无”：

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 库已经扩展了执行此操作的显示和隐藏方法，但我不想仅仅为了一次调用而引用这个库。我知道有一个 WinJS.UI.Flyout 可以执行类似的操作，但它不适用于我的情况。任何想法如何做到这一点？

score 0 · Accepted Answer

问题是 jQuery 默认情况下不会将hide动画放入其动画队列中。这就是为什么我的初始代码是先隐藏 html 元素，然后再对其进行动画处理。解决方案是使用明确指定hide呼叫应排队的参数调用 hide：

panelContainer.hide({queue: true});

1 回答 1