我们来看看jquery是如何实现淡入 淡出效果的.
fadeOut(speed,callback)
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
$("#fadeOut1").click(function(){ $("#fadeOut").fadeOut("slow",function(){alert("是不是下面这个层慢慢消失了！")}); })
复制代码
这里我们说需要说明的是
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fadeIn(speed, callback)
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 |
用法和 fadeOut 一样,只不过是一个相反的过程
fadeTo(speed,opacity,callback)
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
$("#fadeTo1").click(function(){ $("#fadeTo").fadeTo("slow",0.5,function(){alert("是不是下面这个层透明度变成50%了！")}); })
复制代码
0.5表示将不透明度设置成50%
所有代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery基础教程五(效果函数之fadeIn,fadeOut和fadeTo)</title><script language="javascript" src="jquery.js"></script><style> .redborder{border:2px dashed #ff0000 }</style><SCRIPT LANGUAGE="JavaScript"><!--$(document).ready(function() { $("div").addClass("redborder"); $("#fadeOut1").click(function(){ $("#fadeOut").fadeOut("slow",function(){alert("是不是下面这个层慢慢消失了！")}); }) $("#fadeIn1").click(function(){ $("#fadeIn").fadeIn("slow",function(){alert("是不是下面这个层慢慢出现了！")}); }) $("#fadeTo1").click(function(){ $("#fadeTo").fadeTo("slow",0.5,function(){alert("是不是下面这个层透明度变成50%了！")}); }) })//--></SCRIPT></head><body>fadeOut(speed,callback) <BR>通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。<BR> 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。<BR> <INPUT TYPE="submit" ID="fadeOut1" value="fadeOut1"><div ID=fadeOut> <br />点击fadeOut1将执行$("#fadeOut").fadeOut("slow",function() {alert("是不是下面这个层慢慢消失了！")});<br /></div><br><br> fadeIn(speed, callback)<BR> 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。<BR> 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 <BR> <INPUT TYPE="submit" ID="fadeIn1" value="fadeIn1"><div ID=fadeIn style="display:none">点击fadeIn1将执行 $("#fadeIn").fadeIn("slow",function() {alert("是不是下面这个层慢慢出现了！")});</div><br><br>fadeTo(speed,opacity,callback)<p>把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。</p><p>这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。</p><INPUT TYPE="submit" ID="fadeTo1" value="fadeTo1"><div ID=fadeTo>点击fadeIn1将执行 $("#fadeTo").fadeTo("slow",0.5,function() {alert("是不是下面这个层透明度变成50%了！")});</div><br><br> </body></html>
转载于:https://www.cnblogs.com/n666/archive/2010/04/01/2190941.html
相关资源：DirectX修复工具V4.0增强版
