jQuery 渐变 效果
在本教程中，您将学习如何使用 jQuery 淡入和淡出元素。
jQuery fadeIn() 和 fadeOut() 方法
您可以使用 jQuery 的 fadeIn() 和 fadeOut() 方法通过逐渐增加或减少不透明度来显示或隐藏 HTML 元素。
<script>
$(document).ready(function(){
// 淡出显示的段落
$(".out-btn").click(function(){
$("p").fadeOut();
});
// 隐藏段落中的淡入淡出
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>与其他 jQuery 效果方法一样，您可以选择为 fadeIn() 和 fadeOut() 方法指定持续时间或速度参数，以控制渐变动画将运行多长时间。 持续时间可以使用预定义字符串 'slow' 或 'fast' 之一指定，也可以以毫秒为单位； 较高的值表示较慢的动画。
<script>
$(document).ready(function(){
// 以不同的速度淡出显示的段落
$(".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);
});
// 以不同的速度淡入隐藏段落
$(".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>
$(document).ready(function(){
// 淡出段落后显示警报消息
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
// 要执行的代码
alert("The fade-out effect is completed.");
});
});
// 段落淡入后显示提示信息
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
// 要执行的代码
alert("The fade-in effect is completed.");
});
});
});
</script>jQuery fadeToggle() 方法
jQuery fadeToggle() 方法通过设置不透明度动画来显示或隐藏所选元素，如果元素最初显示，它将淡出； 如果隐藏，它将淡入（即切换淡入淡出效果）。
<script>
$(document).ready(function(){
// 切换段落淡化显示
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>类似地，您可以像 fadeIn()/fadeOut() 方法一样为 fadeToggle() 方法指定持续时间参数来控制淡入淡出切换动画的持续时间或速度。
<script>
$(document).ready(function(){
// 淡入淡出以不同的速度切换段落
$(".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>
$(document).ready(function(){
// 淡入淡出切换段落后显示警报消息
$(".toggle-btn").click(function(){
$("p").fadeToggle(1000, function(){
// 要执行的代码
alert("The fade-toggle effect is completed.");
});
});
});
</script>jQuery fadeTo() 方法
jQuery fadeTo() 方法类似于 .fadeIn() 方法，但与 .fadeIn() 不同的是，fadeTo() 方法允许您将元素淡入到某个不透明度级别。
所需的不透明度参数指定目标元素的最终不透明度，可以是介于 0 和 1 之间的数字。此方法还需要持续时间或速度参数，指定淡入动画的持续时间。
<script>
$(document).ready(function(){
// 淡入具有不同不透明度的段落
$(".to-btn").click(function(){
$("p.none").fadeTo("fast", 0);
$("p.partial").fadeTo("slow", 0.5);
$("p.complete").fadeTo(2000, 1);
});
});
</script>