12

我已经搜索了一段时间的解决方案，但似乎找不到。我想也许在我的小提琴中使用 JQuery .clearQueue()，但它不起作用。

这是小提琴。

需要明确的是：我希望 sideToggle() 执行，但是一旦再次单击它并且第一个 slideToggle() 尚未完成，它应该停止第一个动画并向上滑动。使用该.clearQueue()方法它确实可以单击两次，但是当单击例如三次时，该框消失并且高度不知何故搞砸了。

4

3 回答 3

21

使用 jquery .stop()api 可以解决问题。

工作示例。

于 2013-01-26T17:32:27.923 回答
7

在动画期间使用 stop() 可能会导致无法再达到原始高度的不良情况。

另一种选择是强制动画在单击可以再次触发之前完成：

function clickFunc() {
    var $this=$(this);
    if($this.hasClass('toggling')){return;}
    $this.addClass('toggling')
    $this.stop().slideToggle(300,function(){
        $this.removeClass('toggling');
    });
}
于 2015-07-24T14:13:46.243 回答
3

有一个插件可以用来暂停和恢复非 jQuery 原生的动画：http: //tobia.github.com/Pause/

如果您不需要对动画进行如此精细的调整，那么您可以使用.finish（添加 jQuery 1.9）而不是.clearQueue. 问题是它突然结束了动画，这看起来有点奇怪。

问题是 jQuery 不跟踪原始高度（只是$("div").data('originalHeight', $("div").height())自己做这个）。这将通过在动画中间清除队列来防止高度被搞砸：

http://jsfiddle.net/xj3Py/3/

这仍然不是完美的，因为它会通过 3 次或更多点击跳跃，但至少高度不会搞砸。

于 2013-01-26T17:34:46.240 回答