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

Await — Thu, 18 Sep 2008 03:16:28 +0000

我们来看看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>

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

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

2009-06-11 -- jQuery 实现 tab 切换一例 (11)
对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
2009-05-27 -- jQuery性能优化指南 (6)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开...
2008-11-29 -- 简单几步显示/隐藏文章内容 (16)
最近在几个BLOG里都见到这种效果，在标题前面有个按钮点击后关闭文章的内容[效果见BLOG的首页]。虽然实际上没什么用处，但还蛮好玩的。今天给大家讲讲怎么用jQuery来实现这种功能。其实很简单，我们...
2008-09-18 -- jquery基础教程四[css的操作之css,height和width] (3)
首先我们看看 css(key, value) 和 css(name) css(key, value) 在所有匹配的元素中，设置一个样式属性的值。 css(name) 访问第一个...
2008-09-15 -- jquery基础教程二[伸缩、隔行变色...] (3)
在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子 Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行] 可伸缩块 p,d...

您可能也喜欢：
jQuery中queue和dequeue的用法	jQuery 实现 tab 切换一例	jQuery实现背景图渐变切换	用jQuery实现个性有序列表	用jquery写一个简单的菜单伸缩效果
无觅

等待-放飞梦想 » fadeout

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

相关文章