（转）jquery基础教程五(渐变效果函数之fadeIn,fadeOut和fadeTo)

最新推荐文章于 2024-11-04 16:17:23 发布

weixin_30426957

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量165

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/mzoylee/archive/2008/12/20/1359014.html

版权

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

    $("#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%了！")});
    })

})
//--><br%20/>%0D%0A</SCRIPT><br%20/>%0D%0A</head><br%20/>%0D%0A<body><br%20/>%0D%0AfadeOut(speed,callback)%20<BR><br%20/>%0D%0A%E9%80%9A%E8%BF%87%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%E7%9A%84%E5%8F%98%E5%8C%96%E6%9D%A5%E5%AE%9E%E7%8E%B0%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E5%85%83%E7%B4%A0%E7%9A%84%E6%B7%A1%E5%87%BA%E6%95%88%E6%9E%9C%EF%BC%8C%E5%B9%B6%E5%9C%A8%E5%8A%A8%E7%94%BB%E5%AE%8C%E6%88%90%E5%90%8E%E5%8F%AF%E9%80%89%E5%9C%B0%E8%A7%A6%E5%8F%91%E4%B8%80%E4%B8%AA%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E3%80%82<BR></p>%0D%0A<p>%E8%BF%99%E4%B8%AA%E5%8A%A8%E7%94%BB%E5%8F%AA%E8%B0%83%E6%95%B4%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E7%9A%84%E5%85%83%E7%B4%A0%E7%9A%84%E9%AB%98%E5%BA%A6%E5%92%8C%E5%AE%BD%E5%BA%A6%E4%B8%8D%E4%BC%9A%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E3%80%82<BR></p>%0D%0A<p><INPUT%20TYPE=%22submit%22%20ID=%22fadeOut1%22%20value=%22fadeOut1%22><br%20/>%0D%0A<div%20ID=fadeOut>%20<br%20/><br%20/>%0D%0A%E7%82%B9%E5%87%BBfadeOut1%E5%B0%86%E6%89%A7%E8%A1%8C%24("#fadeOut").fadeOut("slow",function()%7Balert("%E6%98%AF%E4%B8%8D%E6%98%AF%E4%B8%8B%E9%9D%A2%E8%BF%99%E4%B8%AA%E5%B1%82%E6%85%A2%E6%85%A2%E6%B6%88%E5%A4%B1%E4%BA%86%EF%BC%81")%7D);<br%20/><br%20/>%0D%0A</div><br%20/>%0D%0A<br><br></p>%0D%0A<p>fadeIn(speed,%20callback)<BR></p>%0D%0A<p>%E9%80%9A%E8%BF%87%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%E7%9A%84%E5%8F%98%E5%8C%96%E6%9D%A5%E5%AE%9E%E7%8E%B0%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E5%85%83%E7%B4%A0%E7%9A%84%E6%B7%A1%E5%85%A5%E6%95%88%E6%9E%9C%EF%BC%8C%E5%B9%B6%E5%9C%A8%E5%8A%A8%E7%94%BB%E5%AE%8C%E6%88%90%E5%90%8E%E5%8F%AF%E9%80%89%E5%9C%B0%E8%A7%A6%E5%8F%91%E4%B8%80%E4%B8%AA%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E3%80%82<BR></p>%0D%0A<p>%E8%BF%99%E4%B8%AA%E5%8A%A8%E7%94%BB%E5%8F%AA%E8%B0%83%E6%95%B4%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E7%9A%84%E5%85%83%E7%B4%A0%E7%9A%84%E9%AB%98%E5%BA%A6%E5%92%8C%E5%AE%BD%E5%BA%A6%E4%B8%8D%E4%BC%9A%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E3%80%82%20<BR></p>%0D%0A<p><br%20/>%0D%0A<INPUT%20TYPE=%22submit%22%20ID=%22fadeIn1%22%20value=%22fadeIn1%22><br%20/>%0D%0A<div%20ID=fadeIn%20style=%22display:none%22>%E7%82%B9%E5%87%BBfadeIn1%E5%B0%86%E6%89%A7%E8%A1%8C%20%24("#fadeIn").fadeIn("slow",function()%7Balert("%E6%98%AF%E4%B8%8D%E6%98%AF%E4%B8%8B%E9%9D%A2%E8%BF%99%E4%B8%AA%E5%B1%82%E6%85%A2%E6%85%A2%E5%87%BA%E7%8E%B0%E4%BA%86%EF%BC%81")%7D);</div><br%20/>%0D%0A<br><br><br%20/>%0D%0AfadeTo(speed,opacity,callback)<br%20/>%0D%0A<p>%E6%8A%8A%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%E4%BB%A5%E6%B8%90%E8%BF%9B%E6%96%B9%E5%BC%8F%E8%B0%83%E6%95%B4%E5%88%B0%E6%8C%87%E5%AE%9A%E7%9A%84%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%EF%BC%8C%E5%B9%B6%E5%9C%A8%E5%8A%A8%E7%94%BB%E5%AE%8C%E6%88%90%E5%90%8E%E5%8F%AF%E9%80%89%E5%9C%B0%E8%A7%A6%E5%8F%91%E4%B8%80%E4%B8%AA%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E3%80%82</p><br%20/>%0D%0A<p>%E8%BF%99%E4%B8%AA%E5%8A%A8%E7%94%BB%E5%8F%AA%E8%B0%83%E6%95%B4%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E7%9A%84%E5%85%83%E7%B4%A0%E7%9A%84%E9%AB%98%E5%BA%A6%E5%92%8C%E5%AE%BD%E5%BA%A6%E4%B8%8D%E4%BC%9A%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E3%80%82</p><br%20/>%0D%0A<INPUT%20TYPE=%22submit%22%20ID=%22fadeTo1%22%20value=%22fadeTo1%22><br%20/>%0D%0A<div%20ID=fadeTo>%E7%82%B9%E5%87%BBfadeIn1%E5%B0%86%E6%89%A7%E8%A1%8C%20%24("#fadeTo").fadeTo("slow",0.5,function()%7Balert("%E6%98%AF%E4%B8%8D%E6%98%AF%E4%B8%8B%E9%9D%A2%E8%BF%99%E4%B8%AA%E5%B1%82%E9%80%8F%E6%98%8E%E5%BA%A6%E5%8F%98%E6%88%9050%%E4%BA%86%EF%BC%81")%7D);</div><br%20/>%0D%0A<br><br></p>%0D%0A<p></body><br%20/>%0D%0A</html></p>%0D%0A<p>%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80:<a%20href=%22http://www.cnjquery.com/demo/jquery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E4%BA%94(%E6%95%88%E6%9E%9C%E5%87%BD%E6%95%B0%E4%B9%8BfadeIn,fadeOut%E5%92%8CfadeTo).html%22%20target=%22_blank%22>http://www.cnjquery.com/demo/jquery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E4%BA%94(%E6%95%88%E6%9E%9C%E5%87%BD%E6%95%B0%E4%B9%8BfadeIn,fadeOut%E5%92%8CfadeTo).html</a></p>%0D%0A</div><div%20id=%22MySignature%22></div>%0D%0A<div%20class=%22clear%22></div>%0D%0A<div%20id=%22blog_post_info_block%22>%0D%0A<div%20id=%22BlogPostCategory%22></div>%0D%0A<div%20id=%22EntryTag%22></div>%0D%0A<div%20id=%22blog_post_info%22>%0D%0A</div>%0D%0A<div%20class=%22clear%22></div>%0D%0A<div%20id=%22post_next_prev%22></div>%0D%0A</div>%0D%0A%0D%0A%0D%0A%09%09</div>%0D%0A%09%09<div%20class%20=%20%22postDesc%22>posted%20@%20<span%20id=%22post-date%22>2008-12-20%2019:54</span>%20<a%20href=" https:>mysun