搞定動畫之 JQuery 中的自定義動畫

is_sweet發表於2020-11-05
動畫jQuery

古之立大事者，不惟有超世之才，亦必有堅忍不拔之志——蘇軾

寫在前面

所謂的自定義動畫就是通過 jQuery 提供的方法來完成我們自己想要的動畫效果

animate()方法

jQuery 提供了 animate() 方法完成自定義動畫效果，該方法具有兩種用法。

用法一，語法結構如下所示：

animate(params,[speed],[easing],[fn])

引數說明：

  • params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
  • speed:三種預定速度之一的字串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)
  • easing:要使用的擦除效果的名稱(需要外掛支援). 預設jQuery提供 “linear” 和 “swing”.
  • fn:在動畫完成時執行的函式，每個元素執行一次。

用法二，語法結構如下所示

animate(params,options)

引數說明：

  • params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
  • options:動畫的額外選項。如下所示
    • speed -> 設定動畫的速度,
    • easing -> 規定要使用的 easing 函式
    • callback -> 規定動畫完成之後要執行的函式
    • step -> 規定動畫的每一步完成之後要執行的函式
    • queue -> 布林值。指示是否在效果佇列中放置動畫。如果為 false，則動畫將立即開始

值得注意的是這個函式的關鍵在於指定動畫形式及結果樣式屬性物件。這個物件中每個屬性都表示一個可以變化的樣式屬性。例如 height、top 等。

所有指定的屬性必須用駱駝形式，比如用 marginLeft 代替 margin-left .

示例程式碼如下所示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>animate()</title>
  <script src="./library/jQuery 1.12.4.js"></script>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: lightcoral;
      position: relative;
    }
  </style>
</head>

<body>
  <button id="btn1">移動</button>
  <button id="btn2">變小</button>
  <div id="box"></div>
  <script>
    $('#btn1').on('click', function () {
      $('#box').animate({
        top: '100px',
        left: '100px'
      }, 1000)
    })
    $('#btn2').on('click', function () {
      $('#box').animate({
        width: '100px',
        height: '100px'
      }, 1000)
    })
  </script>
</body>

</html>

執行結果如下圖所示：

需要注意的是 animate() 方法不支援一下 CSS 樣式

  • backgroundColor
  • borderBottomColor
  • borderBottomColor
  • borderBottomColor
  • borderBottomColor
  • Color
  • outlineColor

所謂的併發執行效果就是指多個動畫同時執行。而排序效果就是按住動畫的先後順序執行。

dome如下：

HTML程式碼

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>併發與排隊</title>
  <script src="./library/jQuery 1.12.4.js"></script>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: lightcoral;
      position: relative;
    }
  </style>
</head>

<body>
  <button id="btn">變換</button>
  <div id="box"></div>
</body>

</html>

併發執行效果測試程式碼

// 併發執行
$('#btn').on('click', function () {
  $('#box').animate({
    top: '100px',
    left: '100px'
  }, 1000)
})

執行結果如下所示

排隊執行效果測試程式碼

// 排隊執行
$('#btn').on('click', function () {
  $('#box').animate({
    left: '100px'
  }).animate({
    top: '100px',
  })
})

執行結果如下圖所示：

animate() 第二種寫法的 queue 屬性的作用，測試程式碼如下所示：

$('#btn').on('click', function () {
  $('#box').animate({
    left: '100px'
  }).animate({
    top: '100px',
  }, {
    queue: false
  })
})

執行結果如下所示：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-T4yEnLoT-1604591373841)(./imgs/jQuery併發執行1.gif)]

animate() 第二種寫法的 queue 屬性用於控制元素是併發執行還是排隊執行。

停止動畫效果

jQuery 提供的 stop() 方法 用於停止所有在指定元素上正在執行的動畫。

語法結構如下所示：

stop([queue],[clearQueue],[jumpToEnd])

引數列表：

  • queue: 用來停止動畫的佇列名稱
  • clearQueue: 如果設定成 true，則清空佇列。可以立即結束動畫；為 false 時，停止當前動畫，但是佇列中的動畫可以繼續執行。
  • jumpToEnd: 如果設定成 true，則完成佇列。可以立即完成動畫。

測試程式碼如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>停止動畫</title>
  <script src="./library/jQuery 1.12.4.js"></script>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: lightcoral;
      position: relative;
    }
  </style>
</head>

<body>
  <button id="btn1">開始</button>
  <button id="btn2">停止</button>
  <div id="box"></div>
  <script>
    $('#btn1').on('click', function () {
      $('#box').animate({
        top: '200px',
        left: '200px'
      }, 2000)
    }).on('click', function () {
      $('#box').animate({
        width: '10px',
        height: '10px'
      }, 1000)
    })
    // 動畫停止函式
    // stop([clearQueue])[,jumpToEnd]
    // - clearQueue: 如果設定成 true，則清空佇列。可以立即結束動畫；為 false 時，停止當前動畫，但是佇列中的動畫可以繼續執行。
    // - jumpToEnd: 如果設定成 true，則完成佇列。可以立即完成動畫。

    $('#btn2').on('click', function () {
      $('#box').stop(false, true)
    })
  </script>
</body>

</html>

執行結果如下圖所示

延遲執行動畫

jQuery提供了 delay() 方法用於設定一個 延時來推遲執行佇列中之後的專案。

語法結構如下所示

delay(duration,[queueName])

引數列表

  • duration:延時時間，單位：毫秒
  • queueName:佇列名詞，預設是Fx，動畫佇列。

示例程式碼如下所示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>延遲執行</title>
  <script src="./library/jQuery 1.12.4.js"></script>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: lightcoral;
      position: relative;
    }
  </style>
</head>

<body>
  <button id="btn1">開始</button>
  <div id="box"></div>
  <script>
    $('#btn1').on('click', function () {
      $('#box').animate({
        top: '200px',
        left: '200px'
        // 延遲1000毫秒執行
      }, 1000).delay(1000).animate({
        width: '10px',
        height: '10px'
      }, 1000)
    })
  </script>
</body>

</html>

執行效果如下所示

相關文章