当前位置: 萬仟网 > IT编程>开发语言>Jquery > jQuery---自定义动画 animate();

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

2020年01月18日  | 萬仟网IT编程  | 我要评论

自定义动画

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>

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com