class="fn1">jquery傻瓜教程五(渐变效果之fadeIn,fadeOut和fadeTo)

class="fn1">
我们来看看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=”

href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml“>
<head>

/>
<title>jquery基础教程五(效果函数之fadeIn,fadeOut和fadeTo)

</title>
<script language=”javascript” src=”

href="http://www.cnjquery.com/demo/jquery.js%22%3E%

3C/script">http://www.cnjquery.com/demo/jquery.js”></script>
<style>

r
.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>

jquery傻瓜教程五(渐变效果函数之fadeIn,fadeOut和f

class="fn1">jquery傻瓜教程五(渐变效果之fadeIn,fadeOut和fadeTo)