JQuery slideToggle() 点击多次 - 防止动画

Question

我已经搜索了一段时间，但似乎找不到解决方案。我尝试使用我的示例中的JQuery的.clearQueue()方法，但它并不能正常工作。

这是示例链接。

明确一下：我想要执行sideToggle()，但是如果再次点击它，而第一个slideToggle()还没有完成动画，它就应该停止第一个动画并向上收缩。使用.clearQueue()方法可以实现两次点击的功能，但是当点击三次时，框会消失，并且高度出现问题。

- jdepypere

---

您可以使用jquery.stop()方法。http://api.jquery.com/stop/ - Tearsdontfalls

谢谢，伙计！每天都在学习新的 jQuery 知识！ :) - jdepypere

使用jQuery的.stop()函数，可以像这样实现：$('div').stop().slideToggle(); - Anup

Answer 1

使用jQuery .stop() API 即可解决问题。 示例。

- jdepypere

---

在动画过程中使用stop()可能会导致糟糕的情况，使得原始高度无法再次达到。请参考@Hacktisch的答案以获得解决方案。 - Iyas

Answer 2

在动画过程中使用stop()可能会导致原始高度无法再次达到的糟糕情况。

另一种选择是在点击能够再次触发动画之前强制完成动画：

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

- Hacktisch

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次或更多次会让它跳来跳去，但至少高度不会出问题。

- Explosion Pills