jQuery---自定义动画 animate();

自定义动画

animate();

第一个参数：{对象}，里面可以传需要动画的样式

第二个参数：speed 动画的执行时间

第三个参数：easing 动画的执行效果

第四个参数：callback 回调函数

 

 

 

 

 

        //第一个参数：对象，里面可以传需要动画的样式
        $("#box1").animate({ left: 800, height: 200 });

 

        //第二个参数：speed 动画的执行时间
        $("#box1").animate({ left: 800 }, 4000);

 

        //第三个参数：动画的执行效果
        // //swing:秋千 摇摆
        $("#box2").animate({ left: 800 }, 8000, "swing");
        // //linear:线性 匀速
        $("#box3").animate({ left: 800 }, 8000, "linear");

 

        //第四个参数：回调函数
        $("#box3").animate({ left: 800 }, 8000, "linear", function () {
          console.log("动画执行完毕");
        });

 

合体

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
    }

    #box2 {
      background-color: blue;
      margin-top: 150px;
    }

    #box3 {
      background-color: yellowgreen;
      margin-top: 300px;
    }
  </style>
</head>

<body>
  <input type="button" value="开始">
  <input type="button" value="结束">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function () {
      $("input").eq(0).click(function () {

        //第一个参数：对象，里面可以传需要动画的样式
        //第二个参数：speed 动画的执行时间
        //第三个参数：动画的执行效果
        //第四个参数：回调函数
        //swing:秋千 摇摆
        $("#box1").animate({ left: 800, height: 200 });
        $("#box1").animate({ left: 800 }, 4000);
        $("#box2").animate({ left: 800 }, 4000, "swing");
        $("#box3").animate({ left: 800 }, 4000, "linear", function () {
          console.log("动画执行完毕");
        });
      })
    });
  </script>
</body>

</html>
posted @ 2020-08-12 20:21  同上一闪一闪  阅读(290)  评论(0)  编辑  收藏  举报