jQuery 效果 - 淡入淡出
使用 jQuery，您可以实现对元素显示或隐藏时的淡入淡出效果。
点击 淡入/淡出 面板
实例
演示 jQuery fadeIn() 方法。
演示 jQuery fadeOut() 方法。
演示 jQuery fadeToggle() 方法。
演示 jQuery fadeTo() 方法。
jQuery 淡化方法
使用 jQuery，您可以实现对元素显示或隐藏时的淡入淡出效果。
jQuery 有如下淡化方法:
fadeIn()fadeOut()fadeToggle()fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 方法用于在隐藏元素中淡入。
语法:
$(selector).fadeIn(speed,callback);
可选参数 speed 指定效果的持续时间。它可以采用以下值: "slow", "fast", 或者毫秒.
可选参数 callback 是在 fadeIn() 结束后执行的函数。
下面的实例演示了具有不同参数的 fadeIn() 方法:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});});</script></head><body><p>使用不同的参数演示 fadeIn()</p><button>单击以淡入框</button><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div></body></html>
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选参数 speed 指定效果的持续时间。它可以采用以下值: "slow", "fast", 或者毫秒.
可选参数 callback 是在 fadeOut() 结束后执行的函数。
下面的实例演示了具有不同参数的 fadeOut() 方法:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000);});});</script></head><body><p>使用不同的参数演示 fadeOut()</p><button>单击以淡出框</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body></html>
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法在 fadeIn() 与 fadeOut() 方法之间切换。
如果元素是淡出, 那么 fadeToggle() 将执行淡入。
如果元素是淡入, 那么 fadeToggle() 将执行淡出。
语法:
$(selector).fadeToggle(speed,callback);
可选参数 speed 指定效果的持续时间。它可以采用以下值: "slow", "fast", 或者毫秒.
可选参数 callback 是在 fadeToggle() 结束后执行的函数。
下面的实例演示了具有不同参数的 fadeToggle() 方法:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);});});</script></head><body><p>用不同的速度参数演示 fadeToggle()</p><button>单击以淡入/淡出框</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body></html>
jQuery fadeTo() 方法
jQuery fadeTo() 方法让淡化带上给定的不透明度（值介于 0 和 1 之间）。
语法:
$(selector).fadeTo(speed,opacity,callback);
可选参数 speed 指定效果的持续时间。它可以采用以下值: "slow", "fast", 或者毫秒.
fadeTo() 方法中所需的参数 opacity 指定淡化时给定的不透明度（值介于 0 和 1 之间）。
可选参数 callback 是在 fadeTo() 结束后执行的函数。
下面的实例演示了具有不同参数的 fadeTo() 方法:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeTo("slow", 0.15);$("#div2").fadeTo("slow", 0.4);$("#div3").fadeTo("slow", 0.7);});});</script></head><body><p>使用不同的参数演示 fadeTo() </p><button>点击淡化框</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body></html>
jQuery 效果参考
有关所有 jQuery 效果的完整概述，请访问本站的 jQuery 效果参考 。