<p>我们来看看jquery是如何实现淡入 淡出效果的.</p>
<p>fadeOut(speed,callback)</p>
<p>通过不透明度的变化来实现所有匹配元素的淡<span style="color: #ff0000;">出</span>效果,并在动画完成后可选地触发一个回调函数。</p>
<p>这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。</p>
<p>$(“#fadeOut1″).click(function(){
$(“#fadeOut”).fadeOut(“slow”,function(){alert(“是不是下面这个层慢慢消失了!”)});
})
<span id="more-231"></span>
这里我们说需要说明的是
speed (String|Number): (可选) 三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
fadeIn(speed, callback)</p>
<p>通过不透明度的变化来实现所有匹配元素的淡<span style="color: #ff0000;">入</span>效果,并在动画完成后可选地触发一个回调函数。</p>
<p>这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。 |</p>
<p>用法和 fadeOut 一样,只不过是一个相反的过程</p>
<p>fadeTo(speed,opacity,callback)</p>
<p>把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。</p>
<p>这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。</p>
<p>$(“#fadeTo1″).click(function(){
$(“#fadeTo”).fadeTo(“slow”,0.5,function(){alert(“是不是下面这个层透明度变成50%了!”)});
})
0.5表示将不透明度设置成50%</p>
<p>所有代码</p>
<!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)
通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
<INPUT TYPE=”submit” ID=”fadeOut1″ value=”fadeOut1″>
<div ID=fadeOut> <br />
点击fadeOut1将执行$("#fadeOut").fadeOut("slow",function(){alert("是不是下面这个层慢慢消失了!")});<br />
</div>
fadeIn(speed, callback)
通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
<INPUT TYPE=”submit” ID=”fadeIn1″ value=”fadeIn1″>
<div ID=fadeIn style=”display:none”>点击fadeIn1将执行 $("#fadeIn").fadeIn("slow",function(){alert("是不是下面这个层慢慢出现了!")});</div>
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>
参数:
speed(String,Number) : 三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
callback(Function) : (可选) 在动画完成时执行的函数
要fadein的东西,CSS 定义必须是display:none,才能fadein,意思就是从消失,渐渐出来。它都没消失,怎么渐渐出来?fadeout也一样,CSS 定义必须不能display:none,才能渐渐消失