思洋互动网站建设学前班

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

上述代码中的slideUp()和slideDown()这两个函数实现jQuery特效函数的向上滑动    与向下滑动。在这里给出了效果的持续时间和附加回调函数，效果如图3.14和图3.15所示。

和前面提到的切换函数类似，对于滑动操作，也有相应的滑动切换函数slideToggle()。它在滑上和滑下两种状态下切换。

 

图3.14  DIV滑动隐藏

图3.15  DIV滑动显示

3．jQuery函数slideToggle()--切换高度变化

该函数通过高度变化来切换所有匹配元素的可见性。其语法形式如下：

1. slideToggle(speed,[callback]) 

注：参数同上面的介绍。

可以将上述代码修改如下：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").click(function(){  
4. 4           $("#div1").slideToggle(4000,function(){alert("Change Visible            Status");});    //利用滑动方向切换函数切换元素滑动动作及时间跨度，并显                              示附加信息  
5. 5       });  
6. 6   });  
7. 7 </script> 

 

上述代码就是切换滑动动作函数的用法，效果和前面的toggle()函数相同。