jQuery---自定義動畫 animate();

時間 2020-01-18

標籤 jquery 自定義動畫 animate 欄目 JQuery 简体版

原文原文鏈接

自定義動畫

animate();html

第一個參數：{對象}，裏面能夠傳須要動畫的樣式jquery

第二個參數：speed 動畫的執行時間函數

第三個參數：easing 動畫的執行效果動畫

第四個參數：callback 回調函數spa

        //第一個參數：對象，裏面能夠傳須要動畫的樣式
        $("#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("動畫執行完畢");
        });

合體code

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。