jQuery | stop() 示例介绍

在使用jQuery进行DOM操作的过程中，常常需要对元素的动画或者事件进行控制。而stop()方法则是一个常用且非常有用的方法，它可以用来停止当前正在运行的动画或者事件。

用法

stop()方法的用法非常简单，只需在需要停止的元素上调用该方法即可。调用格式为：

$(selector).stop(stopAll,goToEnd);

其中，selector是需要停止的元素的选择器，stopAll和goToEnd是两个可选的参数。

• stopAll：bool类型，表示是否停止元素上当前正在运行的所有动画和事件。如果该参数为true，则会停止所有动画和事件队列。默认为false。
• goToEnd：bool类型，表示是否立即将被停止的动画或者事件执行到最后一步。如果该参数为true，则会将动画或者事件执行到最后一步再停止。默认为false。

示例：

$("button").click(function(){
  $("#box1").stop();
});

以上代码的作用是当点击button时，停止#box1元素上的所有动画和事件。

注意事项

在使用stop()方法时，需要注意以下几点：

• stop()方法只能用于已经被jQuery动画所处理的属性，例如height、width、margin、padding等。而普通的CSS属性并不能被stop()方法所停止。
• stop()方法只能用于使用队列进行管理的动画和事件，例如fadeIn()、fadeOut()、slideUp()等方法所产生的动画。而直接使用animate()方法产生的动画不属于这种类型，需要使用clearQueue()方法将动画队列清空才能使用stop()方法。
• stop()方法只能停止正在进行中的动画和事件，不能对已经完成的动画和事件产生影响。如果需要重复执行某一动画，需要在停止之后再次执行。

总结

stop()方法是一个非常有用的jQuery方法，它可以用来停止正在进行中的动画和事件。在使用时需要注意一些限制条件，才能发挥其最大的作用。