思洋互动网站建设学前班

利用jQuery的显示与隐藏函数实现（2）

刚才的示例使用了显示与隐藏函数的基本形式。实际上这两个函数还有变形形式，即添加了显示与隐藏速度的设定及附加了回调函数。我们可以将上述代码修改如下：

1. 1　<script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").toggle(function(){  
4. 4               $("#div1").hide(4000,function(){alert("You can't see me!");});              //设定隐藏元素过程的时间跨度，并利用消息提示框显示附加信息  
5. 5           },  
6. 6           function(){  
7. 7               $("#div1").show(4000,function(){alert("You can see me!");});                    //设定显示元素过程的时间跨度，并利用消息提示框显示附加信息  
8. 8           }  
9. 9       );  
10. 10  });  
11. 11</script> 

 

上述代码在显示与隐藏函数中加入了时间跨度4000毫秒，并在层的显示及隐藏后出现提示对话框。隐藏效果是DIV向中间逐渐缩小，显示效果是DIV由中间逐步放大到预定大小，效果如图3.10和图3.11所示。

图3.10  DIV隐藏

图3.11  DIV显示

2．转换函数

前面讲解了转换函数toggle()，这个函数也可对层的显示状态进行转换。其语法形式   如下：

1. toggle()  
2. toggle(switch)  
3. toggle(speed,[callback])  

注：如果switch设为true，则调用show()方法来显示匹配的元素，如果switch设为false，则调用hide()来隐藏元素。speed，三种预定速度之一的字符串（"slow"、"normal"或"fast"）或表示动画时长的毫秒数值（如1000）；callback，在动画完成时执行的函数，每个元素执行一次。