网站html+css+jQuery教程系列 第二讲 DIV淡入和淡出——由米定制网

网站html+css+jQuery教程系列第二讲DIV淡入和淡出
——由米定制网
1.教程目的
学习使用jQuery控制div的淡入和淡出。

2.教程内容
使用html+css设置前台div样式，利用jQuery控制div的淡入和淡出效果。

3.教程使用的方法
（1）fadeOut()方法：提供淡出div的方法。

语法：$(selector).fadeOut(speed,callback)。

参数：speed：可选，控制淡出的速度。

默认值“normal”。

单位毫秒。

其他值：slow 、normal、fast；
callback：可选，fadeOut函数执行完之后，要执行的函数。

（2）fadeIn()方法：提供淡入div的方法。

语法：$(selector). fadeIn (speed,callback)。

参数：speed：可选，控制淡入的速度。

默认值“normal”。

单位毫秒。

其他值：slow 、normal、fast；
callback：可选，fadeIn函数执行完之后，要执行的函数。

（3）fadeToggle()方法：切换显示和隐藏div的方法。

语法：$(selector).fadeToggle(speed,callback)。

参数：speed：可选，控制淡出的速度。

默认值“normal”。

单位毫秒。

其他值：slow 、normal、fast；
callback：可选，fadeToggle函数执行完之后，要执行的函数。

4.教程过程
（1）前台展现
使用div的方式展现两个div，一个是提供点击事件的div，一个属于呈现div的淡入和淡出效果。

（2）Css展现
主要是控制前台两个div的样式呈现，一个控制点击事件的div样式，一个控制呈现淡入和淡出的div样式。

（3）jQuery展现
控制鼠标点击div，另一个div呈现淡入和淡出的效果，淡出使用fadeOut()方法，淡入使用fadeIn()方法，切换淡入和淡出使用fadeToggle()方法。

5.教程代码
（1）前台代码
<!-- 淡入和淡出-->
<div id="jQuery">
<div id="jQuery-btn" class="jQuery-drdc-btn">
<p>淡入和淡出</p>
<p>fadeToggle()方法</p>
</div>
<div id="jQuery-nr" class="jQuery-drdc-nr">
<p>hello</p>
<p>word</p>
</div>
</div>
<!-- end -->
（2）Css代码
#jQuery{
width:200px;
height:auto;
margin-left:20px;
margin-top:20px;
}
#jQuery-btn{
width:200px;
height:60px;
text-align:center;
line-height:10px;
cursor:pointer;
margin-top:1px;
}
#jQuery-nr{
width:200px;
height:80px;
text-align:center;
line-height:20px;
margin-top:1px;
}
.jQuery-drdc-btn, .jQuery-drdc-nr{
background:#0F0;
}
（3）jQuery代码
//显示和隐藏
$(".jQuery-drdc-btn").click(function(){
$(".jQuery-drdc-nr").fadeToggle(1000);//切换淡入和淡出
//$(".jQuery-drdc-nr").fadeIn(1000);//淡入
//$(".jQuery-drdc-nr").fadeOut(1000);//淡出});。