jQuery 效果 - 淡入淡出
使用 jQuery，您可以淡入淡出元素的可见性。
点击淡入淡出面板
因为时间宝贵，我们提供快速便捷的学习体验。
在 W3Schools，您可以学习所有需要学习的内容，以易于访问且方便的格式呈现。
例子
jQuery fadeIn()
演示 jQuery fadeIn() 方法。
jQuery fadeOut()
演示 jQuery fadeOut() 方法。
jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。
jQuery fadeTo()
演示 jQuery fadeTo() 方法。
jQuery 淡入淡出方法
使用 jQuery，您可以淡入淡出元素的可见性。
jQuery 有以下淡入淡出方法
fadeIn()fadeOut()fadeToggle()fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 方法用于淡入隐藏的元素。
语法
$(选择器).fadeIn(速度,回调);
可选的 speed 参数指定效果的持续时间。它可以取以下值："slow"、"fast" 或 毫秒数。
可选的 callback 参数是在淡入完成之后执行的函数。
以下示例演示了 fadeIn() 方法的不同参数
例子
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
自己尝试 »
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法
$(选择器).fadeOut(速度,回调);
可选的 speed 参数指定效果的持续时间。它可以取以下值："slow"、"fast" 或 毫秒数。
可选的 callback 参数是在淡入完成之后执行的函数。
以下示例演示了 fadeOut() 方法的不同参数
例子
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
自己尝试 »
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
如果元素已淡出，则 fadeToggle() 会将它们淡入。
如果元素已淡入，则 fadeToggle() 会将它们淡出。
语法
$(选择器).fadeToggle(速度,回调);
可选的 speed 参数指定效果的持续时间。它可以取以下值："slow"、"fast" 或 毫秒数。
可选的 callback 参数是在淡入完成之后执行的函数。
以下示例演示了 fadeToggle() 方法的不同参数
例子
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
自己尝试 »
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许淡入到给定的不透明度（0 到 1 之间的值）。
语法
$(选择器).fadeTo(速度,不透明度,回调);
必需的 speed 参数指定效果的持续时间。它可以取以下值："slow"、"fast" 或 毫秒数。
在 fadeTo() 方法中，必需的 opacity 参数指定淡入到给定的不透明度（0 到 1 之间的值）。
可选的 callback 参数是在函数完成之后执行的函数。
以下示例演示了 fadeTo() 方法的不同参数
例子
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
自己尝试 »
jQuery 练习
jQuery 效果参考
有关所有 jQuery 效果的完整概述，请访问我们的 jQuery 效果参考。
