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()` 方法