jQuery 停止动画

jQuery stop() 方法用于在动画或效果完成前对它们进行停止

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

语法:

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

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法,不带参数:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>谭磊</title>
    <script src="jquery-3.3.1.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#flip").click(function(){
                $("#panel").slideDown(5000);
            });
            $("#stop").click(function(){
                $("#panel").stop();
            });
        });
    </script>
    <style type="text/css">
        #panpel,#flip
        {
          padding: 5px;
            text-align:center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }
        #panel
        {
            padding: 50px;
            display: none;
        }
    </style>
</head>
<body>
<button >停止滑动</button>
<div >点我向下滑动面板</div>
<div >HELLO WORLD!</div>
</body>
</html>