Question

根据我的理解，使用.stop()会阻止回调函数触发，对吗？

不幸的是，这似乎在我当前的脚本中不起作用：

newSubMenu.stop().slideToggle(250, function() {
  newSubMenu.css('visibility', 'visible').addClass('open');
});

双击时动画现在停止，但newSubMenu仍然获得了课程open，我无法弄清楚原因。

我想要实现的目标是在动画完成之前不要应用类open。

Answer 1

来自documentation：

在元素上调用.stop()时，会立即停止当前运行的动画（如果有）。 ...不调用回调函数。

如果stop()的第三个参数为true，则会调用回调函数。

在您提供的代码中，回调将会运行，因为您已经停止运行动画，而不是在调用slideToggle()时尚未运行的stop()动画。

这是working example showing the callback being stopped。

Answer 2

要了解为什么会发生这种情况，您必须了解切换的作用。每次点击，slideToggle都会获得slideDown或slideUp的信息。

结论是：每次切换完成后，您的函数将被调用，而您的newSubMenu将获得visibility:visible 样式，如果不是"open"，则为Click-> Stop all animations on element -> toggle slide -> call/excecute function存在。

{{1}}

Answer 3

.stop()可用于停止当前正在运行的动画。动画完成后，将执行回调。为了停止当前动画并避免调用回调，你需要做类似的事情;

newSubMenu.mouseover(function(){
    newSubMenu.slideToggle(250, function(){
        $(this).css('visibility', 'visible').addClass('open');
    });
}).dblclick(function(){

    // this will stop the execution of the .slideToggle animation
    // whitch will prevent the callback from being executed
    newSubMenu.stop();

});

jsFiddle example

Answer 4

jQuery在1.8版中添加了“始终”回调：

始终

类型：功能（Promise animation，Boolean jumpedToEnd）

动画完成或停止时要调用的函数   完成（其Promise对象被解析或拒绝）。   （版本添加：1.8）

网址：http://api.jquery.com/animate/

如果定期制作动画或将其与stop()中断，则会一直触发。

jQuery + Stop +回调函数

4 个答案: