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

Question

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

这是小提琴.

要清楚:我希望sideToggle()执行,但是一旦它再次被点击并且第一个slideToggle()还没有完成,它应该停止第一个动画并向后滑动.使用该.clearQueue()方法它可以工作两次点击,但是当点击例如三次时,盒子消失并且heigt以某种方式搞砸了.

Answer 1

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

工作实例.

Answer 2

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

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

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