jQuery 淡化效果

Created: October-14, 2018

在本教程中，你將學習如何使用 jQuery 淡入淡出元素。

jQuery `fadeIn()` 和 `fadeOut()` 方法

你可以使用 jQuery fadeIn() 和 fadeOut() 方法通過逐漸增加或減少其不透明度來顯示或隱藏 HTML 元素。

<script type="text/javascript">
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

與其他 jQuery 效果方法一樣，你可以選擇指定 fadeIn() 和 fadeOut() 方法的持續時間或速度引數來控制淡入淡出動畫的執行時間。可以使用預定義的字串之一 'slow' 或者 'fast' 以毫秒為單位指定持續時間 ; 值越高表示動畫越慢。

<script type="text/javascript">
$(document).ready(function(){
    // Fading out displayed paragraphs with different speeds
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Fading in hidden paragraphs with different speeds
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

注意： fadeIn() / fadeOut() 方法的效果類似於 show() / hide() ，但與 show() / hide() 方法不同， fadeIn() / fadeOut() 方法僅動畫目標元素的不透明度，並且不會為其尺寸設定動畫。

你還可以指定在 fadeIn() 或 fadeOut() 方法完成後執行的回撥函式。我們將在後續章節中詳細瞭解回撥函式。

<script type="text/javascript">
$(document).ready(function(){
    // Display alert message after fading out paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Code to be executed
            alert("The fade-out effect is completed.");
        });
    });
    
    // Display alert message after fading in paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Code to be executed
            alert("The fade-in effect is completed.");
        });
    });
});
</script>

jQuery `fadeToggle()` 方法

jQuery fadeToggle() 方法通過設定不透明度來顯示或隱藏所選元素，使得如果元素最初顯示，它將淡出; 如果隱藏，它將淡入（即切換褪色效果）。

<script type="text/javascript">
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

同樣，你可以指定方法的 duration 引數， fadeToggle() 如 fadeIn() / fadeOut() 方法，以控制淡入淡出切換動畫的持續時間或速度。

<script type="text/javascript">
$(document).ready(function(){
    // Fade Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

同樣，你也可以為方法指定回撥函式 fadeToggle() 。

<script type="text/javascript">
$(document).ready(function(){
    // Display alert message after fade toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Code to be executed
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>

jQuery `fadeTo()` 方法

jQuery fadeTo() 方法與 .fadeIn() 方法類似，但與 .fadeIn() 方法不同， fadeTo() 可以將元素淡入某個不透明度級別。

$(selector).fadeTo(speed, opacity, callback);

必需的 opacity 引數指定目標元素的最終不透明度，可以是介於 0 和 1 之間的數字。此方法還需要 duration 或 speed 引數，用於指定淡入淡出動畫的持續時間。

<script type="text/javascript">
$(document).ready(function(){
    // Fade to paragraphs with different opacity
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

jQuery fadeIn() 和 fadeOut() 方法

jQuery fadeToggle() 方法

jQuery fadeTo() 方法

jQuery `fadeIn()` 和 `fadeOut()` 方法

jQuery `fadeToggle()` 方法

jQuery `fadeTo()` 方法