jquery基础教程三[渐变效果]

周三,2008 九 17 22:16:28

我们来看看jquery是如何实现淡入淡出效果的.

fadeOut(speed,callback)

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

这里我们说需要说明的是
speed (String|Number): (可选) 三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

fadeIn(speed, callback)

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

用法和 fadeOut 一样,只不过是一个相反的过程

fadeTo(speed,opacity,callback)

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

Demo_6：fadeIn(),fadeOut()和fadeTo()

<!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>效果函数之fadeIn,fadeOut和fadeTo</title> <script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script> <style> body { margin: 0 auto; text-align: center; font-size: 12px; } p { font-size: 14px; font-weight: 700; } .box { width: 500px; text-align: left; border: 2px dashed #ccc; margin: 10px 0; padding: 10px; } </style> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </head> <body> <div class="box"> <p>fadeOut(speed,callback) </p> 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。<br /> 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。<br /><br /> <INPUT TYPE="submit" ID="fout" value="fadeOut"> <div ID="fadeOut"> <br /> 点击fadeOut将执行$("#fadeOut").fadeOut("slow",function(){alert("这个层慢慢消失了！")});<br /> </div> <br><br> </div> <div class="box"> <p>fadeIn(speed, callback)</p> 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。<br /> 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 <br /><br /> <INPUT TYPE="submit" ID="fin" value="fadeIn"> <div ID="fadeIn" style="display:none">点击fadeIn将执行 $("#fadeIn").fadeIn("slow",function(){alert("这个层是慢慢出现的！")});</div> <br><br> </div> <div class="box"> <p>fadeTo(speed,opacity,callback)</p> 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。<br /><br /> <INPUT TYPE="submit" ID="fto" value="fadeTo"> <div ID="fadeTo">点击fadeIn1将执行 $("#fadeTo").fadeTo("slow",0.5,function(){alert("这个层透明度变成50%了！")});</div> <br><br> </div> </body> </html>

提示：你可以先修改部分代码再运行。

今天就讲这个例子好了，明天继续。现在每天都觉得时间不够用，郁闷…

上一篇：WordPress“主题壁纸”

下一篇：Flash CS4 细节