jQuery自定义动画

html文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <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 动画的执行时间
      //第三个参数：动画的执行效果
      //第四个参数：回调函数
      $("#box1").animate({left:800}, 8000);
      //swing:秋千 摇摆
      $("#box2").animate({left:800}, 8000, "swing");
      //linear:线性 匀速
      $("#box3").animate({left:800}, 8000, "linear", function () {
        console.log("11111");
      });
    })
  });
</script>
</body>
</html>

　　

posted @ 2020-04-20 16:53  迷幻天空岛  阅读(151)  评论(0)    收藏  举报