jQuery队列动画

最新推荐文章于 2024-10-30 19:10:39 发布

dibisha5159

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量101

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/YoogaChan/p/6842669.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery队列动画</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script>

        $(function () {

      $("#star").click(function () {
          //delay() 延时执行
         $("#text1").delay(1000).animate({"width":"+=200px"},2000,"easeInOutQuart",function () {

            $("#text2").animate({"width":"300px","height":"200px","background-color":"green"},2000,function () {

                $("#text3").animate({"width":"300px","height":"100px"},2000,function () {

                    $("#text4").animate({"width":"200px","height":"100px"},2000);
                });

            });

         });

      });


            $("#stop").click(function () { //把当前的动画执行完，再清空它后面的队列动画
                $("div").clearQueue();

            });


        })

    </script>
    <style>
        div{
            width: 100px;
            height: 50px;
            background-color: lightpink;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div id="text1">雷克萨斯</div>
<div id="text2">英菲尼迪</div>
<div id="text3">凯迪拉克</div>
<div id="text4">华晨宝马</div>

<button id="star">开始动画</button>
<button id="stop">停止动画</button>

</body>
</html>