jQuery 效果 - stop() 方法

最新推荐文章于 2026-01-17 10:00:41 发布

原创最新推荐文章于 2026-01-17 10:00:41 发布 · 775 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

定义和用法
stop() 方法停止当前正在运行的动画。

语法

$(selector).stop(stopAll,goToEnd)

参数	描述
stopAll	可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd	可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  引入你的 jq 文件  -->
    <script src="../../jq/jquery-2.js"></script>
    <style>
        *{margin:0;padding:0;}
        #panl{
            width:60px;
            height:22px;
            overflow: hidden;
            margin:10px 0 0 10px;
            border:1px solid black;
        }
        .head{
            width:300px;
            height:30px;
            line-height:30px;
            border:1px solid greenyellow;
            background-color:fuchsia;
            padding-left:8px;
        }
        .content{padding-left:8px;text-indent:2em;border-top:1px solid #0050D0;}
    </style>
</head>
<body>
    <script>
        $(function () {
            $("button:eq(0)").click(function(){
                $("#panl").animate({height:'150px'},1000)
                .animate({width:'300px'},1000)
                .hide(2000)
                .animate({height:'show',width:'show',opacity:'show'},1000)
                .animate({height:'500px'},2000)
            });
            $("button:eq(1)").click(function(){
                $('#panl').stop(); //停止当前动画，持续下一个动画
            })
            $("button:eq(2)").click(function(){
                $('#panl').stop(true); //消除元素的所有动画（立即停止）
            })
            $("button:eq(3)").click(function(){
                $('#panl').stop(false,true); // 当前动画直接到末尾状态，继续下一个 
            })
            $("button:eq(4)").click(function(){
                $('#panl').stop(true,true); // 清楚所有动画，让当前动画直接到达末尾状态 
            })
        });
    </script>
    <button>开始一系列动画</button>
    <button>stop()</button>
    <button>stop(true)</button>
    <button>stop(false,true)</button>
    <button>stop(true,true)</button>
    <div id="panl">
        <h5 class="head">什么是jquery呢？</h5>
        <div class="content">
            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。
			jQuery凭借简洁的语法和跨平台的兼容性，
			极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码
			风格改变了JavaScript程序员的设计思路和
			编写程序的方式。
        </div>
    </div>
</body>
</html>

记得点赞收藏哦，以便下次查阅！

标签

#jquery