jQuery停止动画finish和stop函数区别

最新推荐文章于 2022-05-17 07:30:00 发布

qq_29069777

最新推荐文章于 2022-05-17 07:30:00 发布

阅读量331

点赞数

原文链接：https://www.mk2048.com/blog/blog.php?id=h0achciak0bb&title=jQuery%E5%81%9C%E6%AD%A2%E5%8A%A8%E7%94%BBfinish%E5%92%8Cstop%E5%87%BD%E6%95%B0%E5%8C%BA%E5%88%AB

版权

前端专栏收录该内容

1175 篇文章 2 订阅

订阅专栏

stop()函数直接停止动画，finish()也会停止动画同时所有排队的动画的CSS属性跳转到他们的最终值。

示例代码：

<html>

    <head>
        <meta charset="UTF-8" />
        <title>jQuery停止动画finish和stop函数区别</title>
        <style type="text/css">
            div {
                border: 1px solid green;
                width: 200px;
                height: 200px;
                line-height: 200px;
                text-align: center;
            }
        </style>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js 

"></script>
    </head>

    <body>
        <button type="button" id="start">start</button>
        <button type="button" id="start">stop</button>
        <button type="button" id="finish">finish</button>
        <div class="">
            动画
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#start").click(function() {
                    $("div").animate({
                        width: '1800px'
                    }, 3000);
                });

                $("#stop").click(function() {
                    //停止当前正在运行的动画， width: ' =100px'可以停止 
                    //停止当前正在运行的动画  width: '1800px'不能停止
                    $("div").stop();
                });
                $("#finish").click(function() {
                    //停止当前正在运行的动画  width: ' =100px'可以停止 
                    //停止当前正在运行的动画  width: '1800px'可以停止，并且停止在最后一帧
                    $("div").finish();
                });
            });
        </script>
    </body>

</html>