jQuery | stop() 示例

stop()是jQuery中的方法之一，用于停止当前正在运行的动画，并可选择立即完成当前正在运行的动画。这个方法适用于所有类型的jQuery动画。本文将通过示例演示如何使用stop()方法。

基本语法

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

参数说明

• selector: jQuery选择器
• stopAll: 可选参数，如果为true时，停止当前DOM元素上所有正在运行的动画。默认为false，仅停止当前正在运行的动画。
• goToEnd: 可选参数，如果为true时，直接完成当前正在运行的动画。默认为false，只是停止当前正在运行的动画，动画出现了未完成的效果。

示例1：停止正在运行的动画

<div id="box" style="width:100px;height:100px;background-color:red;"></div>

<button id="btn">停止</button>

<script>
$(document).ready(function(){
  $("#btn").click(function(){
    $("#box").stop();
  });
  $("#box").animate({ left: '250px' }, 5000);
});
</script>

效果：点击停止按钮时，动画被停止。可以看到，#box停在了动画停止时的位置。

代码片段：

```html
<div id="box" style="width:100px;height:100px;background-color:red;"></div>

<button id="btn">停止</button>

<script>
$(document).ready(function(){
  $("#btn").click(function(){
    $("#box").stop();
  });
  $("#box").animate({ left: '250px' }, 5000);
});
</script>

## 示例2：停止多个动画

```html
<div id="box" style="width:100px;height:100px;background-color:red;"></div>
<div id="msg" style="display:none;">已经停止了多个动画</div>

<button id="btn">停止多个动画</button>

<script>
$(document).ready(function(){
  $("#btn").click(function(){
    $("#box").animate({ height: '100px' }, 2000);
    $("#box").animate({ width: '100px' }, 2000);
    $("#msg").show(500,function(){
      $("#box").stop(true,true);
    });
  });
});
</script>

效果：点击停止多个动画按钮时，多个动画被停止并直接完成。可以看到，#box的高度和宽度变回了100px，并且#msg的内容显示出来。

代码片段：

```html
<div id="box" style="width:100px;height:100px;background-color:red;"></div>
<div id="msg" style="display:none;">已经停止了多个动画</div>

<button id="btn">停止多个动画</button>

<script>
$(document).ready(function(){
  $("#btn").click(function(){
    $("#box").animate({ height: '100px' }, 2000);
    $("#box").animate({ width: '100px' }, 2000);
    $("#msg").show(500,function(){
      $("#box").stop(true,true);
    });
  });
});
</script>

## 总结

`stop()`方法可以停止当前正在运行的动画，并可选择立即完成当前正在运行的动画。如果有多个动画在运行，可以设置`stop(true)`来停止所有动画。如果需要直接完成所有动画，可以设置`stop(true,true)`。

以上就是`jQuery stop()`方法的介绍和示例，希望对大家学习jQuery有所帮助。