jQuery 效果 - stop() 方法

ZXH0122

于 2020-09-08 19:39:36 发布

阅读量595

点赞数

分类专栏： jq 前端文章标签： jquery

本文链接：https://blog.csdn.net/ZXH0122/article/details/108475455

版权

前端同时被 2 个专栏收录

84 篇文章 3 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

定义和用法
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>

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

ZXH0122

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 效果 - stop() 方法

定义和用法stop() 方法停止当前正在运行的动画。语法$(selector).stop(stopAll,goToEnd)参数描述stopAll可选。规定是否停止被选元素的所有加入队列的动画。goToEnd可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8
复制链接

扫一扫

专栏目录