Question

我已经寻找了一段时间的解决方案，但似乎无法找到它。我想也许可以使用JQuery的.clearQueue()作为我的小提琴，但它不起作用。

这是fiddle。

要清楚：我希望sideToggle（）能够执行，但只要再次点击它就可以了。第一个slideToggle（）尚未完成，它应该停止第一个动画并向上滑动。使用.clearQueue()方法，它确实可以进行两次点击，但是当点击例如三次时，框会消失，并且heigt会以某种方式混乱。

Answer 1

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

Working example.

Answer 2

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

另一种选择是强制动画完成，然后点击再次触发它：

function clickFunc() {
    var $this=$(this);
    if($this.hasClass('toggling')){return;}
    $this.addClass('toggling')
    $this.stop().slideToggle(300,function(){
        $this.removeClass('toggling');
    });
}

Answer 3

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

如果您不需要动画进行微调，那么您可以使用.finish（添加jQuery 1.9）代替.clearQueue。问题是突然完成动画，看起来有点奇怪。

问题是jQuery没有跟踪原始高度（只需要$("div").data('originalHeight', $("div").height())自己做）。这样可以通过清除动画中间的队列来防止高度被搞乱：

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

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

JQuery slideToggle（）多次单击 - 阻止动画

3 个答案: