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

Posted 2023-02-25

【中文标题】多次单击 JQuery slideToggle() - 防止动画

【英文标题】：JQuery slideToggle() clicked multiple times - prevent animation

【发布时间】：2013-01-26 17:18:38

【问题描述】：

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

这是fiddle。

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

【问题讨论】：

你可以使用 jquery.stop() api.jquery.com/stop

谢谢伙计！每天学习新的 jquery 东西！ :)

像这样使用 jquery .stop 函数：$('div').stop().slideToggle();

【参考方案1】：

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

Working example.

【讨论】：

在动画期间使用 stop() 可能会导致无法再达到原始高度的不良情况。请参阅@Hacktisch 答案以获得解决方案

【参考方案2】：

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

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

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

【参考方案3】：

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

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

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

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

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