（转）jquery基础教程五(渐变效果函数之fadeIn,fadeOut和fadeTo)
我们来看看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="
http://www.cnjquery.com/demo/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>
演示地址:http://www.cnjquery.com/demo/jquery基础教程五(效果函数之fadeIn,fadeOut和fadeTo).html
