1. 教程
  2. jQuery 教程
  3. jQuery 動畫效果

jQuery 動畫效果

Created: October-14, 2018

在本教程中，你將學習如何使用 jQuery 為 CSS 屬性設定動畫。

jQuery animate() 方法

jQuery animate() 方法用於建立自定義動畫。該 animate() 方法通常用於動態數字 CSS 特性，例如 width、height、margin、padding、opacity、top 和 left 等，但非數字性質，例如 color 或 background-color 不能使用基本功能的 jQuery 進行動畫。

注意： 並非所有 CSS 屬性都是可動畫的。通常，任何接受數字，長度，百分比或顏色值的 CSS 屬性都是可動畫的。但是，核心 jQuery 庫不支援顏色動畫。要使用 jQuery 顏色外掛來操作和動畫顏色。

語法

jQuery animate() 方法的基本語法 ：

$(selector).animate({ properties }, duration, callback);

animate() 方法的引數具有以下含義：

  • required 屬性引數定義要設定動畫的 CSS 屬性 。
  • 可選的 duration 引數指定動畫執行的時間。可以使用預定義的字串之一 'slow' 或者 'fast' 以毫秒為單位指定持續時間 ; 值越高表示動畫越慢。
  • 可選的callback引數是動畫完成後呼叫的函式。

這是一個簡單的 jQuery animate() 方法示例，它可以在單擊按鈕時將影象從其原始位置向右移動 300 畫素。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

注意： 預設情況下，所有 HTML 元素都具有靜態位置。由於靜態元素不能移動，所以你必須設定 CSS 屬性的元素為 position、relative、fixed 或 absolute 來操縱或動畫的位置。

一次動畫多個屬性

你還可以使用該 animate() 方法同時為元素的多個屬性設定動畫。所有屬性同時動畫，沒有任何延遲。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

注： CSS 屬性名稱必須是駝峰式命名法，當與 animate() 方法一起使用時，例如，字型大小應該是 'fontSize' 而不是 'font-size' 。同樣的，'marginLeft' 而不是 'margin-left' ，'borderWidth' 而不是 'border-width' 等等。

提示： 在為 border-style 屬性設定動畫之前，必須設定 border-width 元素的屬性。在為邊框寬度設定動畫之前，元素必須具有邊框，因為 border-style 屬性的預設值為 none。

逐個動畫多個屬性或動畫佇列

你還可以使用 jQuery 的連結功能在佇列中逐個動畫元素的多個屬性。我們將在下一章中詳細瞭解連結。

以下示例演示了 jQuery 排隊或連結動畫，其中每個動畫將在元素上的上一個動畫完成後啟動。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

使用相對值動畫屬性

你還可以定義動畫屬性的相對值。如果使用 += 或 -= 字首指定值，則通過從屬性的當前值加上或減去給定數量來計算目標值。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

使用預定義值動畫屬性

除了數值，每個屬性可以採用的字串為 'show' ， 'hide' 和 'toggle' 。當你只想將屬性從其當前值設定為初始值並反之亦然時，它將非常有用。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>