思洋互动网站建设学前班

利用jQuery的淡入淡出效果实现

前面提到的滑动效果是通过改变DIV的高来实现显示与隐藏操作。还可以通过改变DIV的透明度来实现显示与隐藏。这需要使用到jQuery的淡入淡出函数fadeIn()、fadeout()。

1．jQuery函数fadeIn()--淡入效果

该函数通过不透明度变化实现元素的淡入。其语法形式如下：

 

1. fadeIn(speed,[callback]) 

 

注：speed，三种预定速度之一的字符串（"slow"，"normal"or "fast"）或表示动画时长的毫秒数值（如1000）；callback，在动画完成时执行的函数，每个元素执行一次。

2．jQuery函数fadeOut()--淡出效果

该函数通过不透明度变化实现元素的淡出。其语法形式如下：

 

1. fadeOut(speed,[callback]) 

注：speed，三种预定速度之一的字符串（"slow"、"normal"或"fast"）或表示动画时长的毫秒数值（如：1000）；callback，在动画完成时执行的函数，每个元素执行一次。

HTML代码和CSS样式参考光盘内容。下面直接看一下JavaScript功能实现：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").toggle(function(){  
4. 4               $("#div1").fadeOut(4000,function(){alert("Fade Out DIV");});                //设定元素淡出效果，并加入淡出时间跨度及显示附加信息  
5. 5           },  
6. 6           function(){  
7. 7               $("#div1").fadeIn(4000,function(){alert("Fade In DIV");});                  //设定元素淡入效果，并加入淡入时间跨度及显示附加信息  
8. 8           }  
9. 9       );  
10. 10  });  
11. 11</script> 

 

上述代码实现的效果如图3.16和图3.17所示。

 

图3.16  DIV的淡出隐藏

图3.17  DIV的淡入显示

 

淡入淡出效果也可用一个转换单独实现，它的实现是依靠DIV的不透明属性的变化来完成的。

3．jQuery函数fadeTo()--淡入淡出切换

该函数把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。其语法形式    如下：

1. fadeTo(speed,opacity,[callback]) 

 

注：speed，三种预定速度之一的字符串（"slow"、"normal"或"fast"）或表示动画时长的毫秒数值（如1000）；callback，在动画完成时执行的函数，每个元素执行一次；opacity，要调整到的不透明度。

可以将上面的代码修改如下：

 

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").toggle(function(){  
4. 4               $("#div1").fadeTo(4000,0,function(){alert("Fade Out DIV");});               //利用元素淡入淡出动作切换函数，设定元素淡出效果，并加入淡出时间跨度               及显示附加信息  
5. 5           },  
6. 6           function(){  
7. 7               $("#div1").fadeTo(4000,1,function(){alert("Fade In DIV");});                    //利用元素淡入淡出动作切换函数，设定元素淡入效果，并加入淡入时间跨度               及显示附加信息  
8. 8           }  
9. 9       );  
10. 10  });  
11. 11</script> 

上述代码中使用了fadeTo()函数，这是一个调整元素透明度的函数，透明度参数为这个函数的第二个参数位置，透明度取值范围在0～1之间，0表示彻底透明，1表示不透明，效果如图3.16和图3.17所示。