打赏

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

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>

说明：

示例中stop()函数没有停止动画，为什么？

posted @ 2017-08-08 14:33  孟繁贵  阅读(977)  评论(0)  编辑  收藏  举报
TOP