思洋互动网站建设学前班

利用jQuery的滑动效果实现（1）

在jQuery的众多特效函数中，可以利用滑动函数来操作DIV的显示与隐藏。

1．jQuery函数slideUp()--滑动函数

该函数向上减小高度动态隐藏所有匹配的元素。其语法形式如下：

1. slideUp(speed,[callback]) 

 

图3.12  DIV的隐藏

图3.13  DIV的显示

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

2．jQuery函数slideDown()--滑动函数

该函数向下增大高度动态显示所有匹配的元素。其语法形式如下：

1. slideDown(speed,[callback]) 

注：参数同上面的介绍。

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

1. 1 <script type="text/javascript">     
2. 2   $(function(){  
3. 3       $("#update").toggle(function(){  
4. 4               $("#div1").slideUp(4000,function(){alert("Slide Up DIV");});                //利用向上滑动函数设定元素向上滑动及时间跨度，并显示附加信息  
5. 5           },  
6. 6           function(){  
7. 7               $("#div1").slideDown(4000,function(){alert("Slide Down              DIV");});//利用向下滑动函数设定元素向下滑动及时间跨度，并显示附加信息  
8. 8           }  
9. 9       );  
10. 10  });  
11. 11</script>