[jQuery教程]jquery基础教程五(渐变效果函数之fadeIn,fadeOut和fadeTo)

最新推荐文章于 2024-10-01 20:12:28 发布

Feiin

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量2.5k

点赞数

分类专栏： javascript 文章标签： jquery function callback javascript border string

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

我们来看看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="http://www.cnjquery.com/demo/jquery.js"></script>
<style>
    .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>
 