思洋互动网站建设学前班

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

下面先来看最基础的应用。将上面的代码稍做修改：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").click(function(){  
4. 4           $("#div1").toggle();            //切换元素的显示状态  
5. 5       });  
6. 6   });  
7. 7 </script> 

 

toggle()函数在这里就是转换DIV的显示状态的。如果DIV是显示的则隐藏，反之则显示，效果如图3.8和图3.9所示。这个函数还有变形形式。例如，给定需要转换的状态，这个通过给函数设定参数来实现。将上面的代码进行再次修改：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").toggle(function(){  
4. 4               $("#div1").toggle(false);   //指定将元素的显示状态切换成隐藏  
5. 5           },  
6. 6           function(){  
7. 7               $("#div1").toggle(true);    //指定将元素的显示状态切换成显示  
8. 8           }  
9. 9       );  
10. 10  });  
11. 11</script> 

 

当参数为真时，相当于调用show()函数，为假时调用hide()。这个函数也可以指定状态切换速度及附加的回调函数，代码如下：

1. 1 <script type="text/javascript"> 
2. 2   $(function(){  
3. 3       $("#update").click(function(){  
4. 4           $("#div1").toggle(4000,function(){alert("Change Visible                 Status");});    //指定元素显示状态切换过程的时间跨度，并显示附加信息  
5. 5       });  
6. 6   });  
7. 7 </script> 

 

效果如图3.12和图3.13所示。