jquery stop()停止当前所有动画效果

ゝ一纸荒年。 2024-02-17 18:14 29阅读 0赞

`stop()`函数用于停止当前匹配元素上正在运行的动画。

stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，

这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为:

jQueryObject.stop( [ queueName ] [, clearQueue [, jumpToEnd ] ] )

其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，

前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。

![Center][]

HTML页面：

停止效果：
    <select id="animation" >
    	<option value="1">停止1</option>
    	<option value="2">停止2</option>
    	<option value="3">停止3</option>
    	<option value="4">停止4</option>
    </select>
    <input id="my" type="button" value="执行动画" />
    </p>
    <div id="div1">
        <h5 class="head">jQuery stop()方法</h5>
    <div id="myDiv">jquery调用stop()方法停止当前所有动画效果
    stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为:
    $(selector).stop([clearQueue],[goToEnd])
    </div>
    </div>

CSS :

JS：

效果：

1）运行时

![Center 1][]

2）单击执行动画

![Center 2][]

3)选择停止1

![Center 3][]

3)选择停止2

![Center 4][]

3)选择停止3

![Center 5][]

3)选择停止4

![Center 6][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5bc4bfdd6f434c91b62889eb0924cd32.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d3567c77cc8f455896e84ac48aabfeb9.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/22216f2bcb30438cbbfee2015f3efcf0.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/607bf91d1aee46aab95b4f0899757e5b.png
[Center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/05efc7f9287e41b8aae8a084d0e90802.png
[Center 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f86815289eaf42bc9d63c4c59f5d5dd5.png
[Center 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f5606e29842f40599e9d8479a43c3352.png