jQuery系列之自定义动画(四)

最新推荐文章于 2021-10-26 17:21:30 发布

原创最新推荐文章于 2021-10-26 17:21:30 发布 · 381 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示自定义动画</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript">

        $(function () {
            $(".d1").click(function () {
                $(".d1").animate(
         //第一个参数,通过{}大括号包裹 表示要变化的样式
        //多个样式之间,使用逗号,分隔属性与值之间用冒号分隔
        {"marginLeft": "200px", "marginTop": "100px"}
//第二个参数,可以是"slow","fast"或者毫秒数 表示执行动画的时间
                        , 2000
                        //callback
                  //动画执行完毕后,回调下面这个函数
                        , function () {
                            $(".d1").animate({"marginLeft": "0px", "marginTop": "0px"}
                                    , 2000);
                        }
                );
            });

            //+=20是相对在执行动画之前,这个元素的
            // 所以每一次点击,都会加上20,就越来越远
            $(".d2").click(function () {
                $(this).animate(
                        {"marginLeft": "+=20px"}
                );

            });


            $(".d3").click(function () {
                //动画队列,会按顺序执行
                $(this).animate(
                        {"marginLeft": "+=20px"},1000
                );
                $(this).animate(
                        {"marginTop": "+=100px"}
                );
                $(this).animate(
                        {"marginLeft": "+=100px"}
                );
                $(this).animate(
                        {"marginLeft": "-=50px"},2000, function () {
                            $(".d3").animate({"marginLeft": "0px", "marginTop": "40px"}
                                    , 2000);
                        }
                );
            });

            $(".stop").click(function () {
                //要停止d3的动画
                //因为d3中,要执行四个动画 stop()只能停止一个,
                // 所以需要点击四次button才能停掉d3的动画队列
//                $(".d3").stop();

                //stop(true)不会只停掉当前正在执行的动画,还会清除后面的动画队列
//                $(".d3").stop(true);

                //第二个参数,是否立即完成当前动画
                $(".d3").stop(false,true);

            });

        });

    </script>
</head>
<body>
<div class="d1" style="position: absolute">
    我是d1这个div元素
</div>

<div class="d2" style="position: absolute; margin-top: 20px">
    我是d2这个div元素
</div>

<div class="d3" style="margin-top: 40px; position: absolute">
    我是d3这个div元素
</div>
<button class="stop" style="margin-top: 300px">停止d3动画</button>

</body>
</html>