jQuery停止动画

关于jQuery停止动画的攻略，我可以给你提供以下完整的介绍。

1. jQuery停止动画的方法

在jQuery中有几种方法可以停止正在运行的动画：

1.1 stop方法

stop() 方法用于停止 jQuery 针对被选中元素所执行的当前动画。

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

参数说明：

stopAll：可选参数，默认为false。表示是否清除队列上的所有动画。
goToEnd：可选参数，默认为false。表示是否让当前的动画立即完成。

1.2 finish方法

finish() 方法用于立即完成被选中元素正在运行的所有动画。

$(selector).finish();

2. 示例说明

2.1 停止动画

当我们需要在动画执行期间终止该动画时，可以使用 stop() 方法。假设我们有一个 div 元素， class 为 box ，在其上设置了一段移动动画。那么可以用以下代码停止该动画：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
        animation: move 5s infinite linear;
    }
    @keyframes move {
        100% {
            left: 200px;
            top: 200px;
        }
    }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="stopMove()">点击停止动画</button>
    <script>
    function stopMove() {
        $('.box').stop();
    }
    </script>
</body>
</html>

2.2 立即完成所有动画

当我们需要立即完成正在运行的所有动画，并跳到动画完成状态时，可以使用 finish() 方法。与 stop() 方法不同的是， finish() 方法不会暂停正在运行的动画，而是立即完成整个动画序列。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
        animation: move 5s infinite linear;
    }
    @keyframes move {
        100% {
            left: 200px;
            top: 200px;
        }
    }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="finishAll()">点击立即结束动画</button>
    <script>
    function finishAll() {
        $('.box').finish();
    }
    </script>
</body>
</html>

以上是两个示例，希望可以帮助你更好地掌握 jQuery 停止动画的使用方法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery停止动画 - Python技术站