hao_2468

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
5 渐变效果函数之fadeIn,fadeOut和fadeTo
我们来看看jquery是如何实现淡入 淡出效果的.

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

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
  1. $("#fadeOut1").click(function(){
  2.    $("#fadeOut").fadeOut("slow",function(){alert("是不是下面这个层慢慢消失了！")});
  3. })
复制代码
这里我们说需要说明的是
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

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

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

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

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

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
  1. $("#fadeTo1").click(function(){
  2.    $("#fadeTo").fadeTo("slow",0.5,function(){alert("是不是下面这个层透明度变成50%了！")});
  3. })
复制代码
0.5表示将不透明度设置成50%

所有代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jquery基础教程五(效果函数之fadeIn,fadeOut和fadeTo)</title>
  6. <script language="javascript" src="jquery.js"></script>
  7. <style>
  8. .redborder{border:2px dashed #ff0000 }
  9. </style>
  10. <SCRIPT LANGUAGE="JavaScript">
  11. <!--
  12. $(document).ready(function() {
  13. $("div").addClass("redborder");
  15. $("#fadeOut1").click(function(){
  16.    $("#fadeOut").fadeOut("slow",function(){alert("是不是下面这个层慢慢消失了！")});
  17. })
  18. $("#fadeIn1").click(function(){
  19.    $("#fadeIn").fadeIn("slow",function(){alert("是不是下面这个层慢慢出现了！")});
  20. })
  21. $("#fadeTo1").click(function(){
  22.    $("#fadeTo").fadeTo("slow",0.5,function(){alert("是不是下面这个层透明度变成50%了！")});
  23. })
  25. })
  26. //-->
  27. </SCRIPT>
  28. </head>
  29. <body>
  30. fadeOut(speed,callback) <BR>
  31. 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。<BR>
  33. 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。<BR>
  35. <INPUT TYPE="submit" ID="fadeOut1" value="fadeOut1">
  36. <div ID=fadeOut> <br />
  37. 点击fadeOut1将执行$(&quot;#fadeOut&quot;).fadeOut(&quot;slow&quot;,function() {alert(&quot;是不是下面这个层慢慢消失了！&quot;)});<br />
  38. </div>
  39. <br><br>
  41. fadeIn(speed, callback)<BR>
  43. 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。<BR>
  45. 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 <BR>
  48. <INPUT TYPE="submit" ID="fadeIn1" value="fadeIn1">
  49. <div ID=fadeIn style="display:none">点击fadeIn1将执行 $(&quot;#fadeIn&quot;).fadeIn(&quot;slow&quot;,function() {alert(&quot;是不是下面这个层慢慢出现了！&quot;)});</div>
  50. <br><br>
  51. fadeTo(speed,opacity,callback)
  52. <p>把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。</p>
  53. <p>这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。</p>
  54. <INPUT TYPE="submit" ID="fadeTo1" value="fadeTo1">
  55. <div ID=fadeTo>点击fadeIn1将执行 $(&quot;#fadeTo&quot;).fadeTo(&quot;slow&quot;,0.5,function() {alert(&quot;是不是下面这个层透明度变成50%了！&quot;)});</div>
  56. <br><br>
  58. </body>
  59. </html>
posted on 2010-04-01 16:59  hao_2468  阅读(574)  评论(0)  编辑  收藏  举报