基本动画函数 Basics

名称

说明

举例

show( )

显示隐藏的匹配元素。

这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

显示所有段落: 

$("p").show()

show( speed, [callback])

以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。

用缓慢的动画将隐藏的段落显示出来，历时600毫秒:

$("p").show(600);

hide( )

隐藏显示的元素

这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。

隐藏所有段落: 

$("p").hide()

hide( speed, [callback] )

以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。

用600毫秒的时间将段落缓慢的隐藏:

$("p").hide("slow");

toggle( )

切换元素的可见状态。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

切换所有段落的可见状态:

$("p").toggle()

toggle( switch )

根据switch参数切换元素的可见状态（ture为可见，false为隐藏）。

如果switch设为true，则调用show()方法来显示匹配的元素，如果switch设为false则调用hide()来隐藏元素。

切换所有段落的可见状态:

var flip = 0;
$("button").click(function () {
   $("p").toggle( flip++ % 2 == 0 );
});

toggle( speed, [callback] )

以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。

用200毫秒将段落迅速切换显示状态，之后弹出一个对话框: 

$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

 

1. 使用基本动画函数

基本的动画函数主要分为show, hide和toggle三个. 都提供了无参数的版本, 表示不适用动画切换元素的显示状态:





1. $("#divPop").show();    
2. $("#divPop").hide();    
3. $("#divPop").toggle();   
 
 
$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();



都提供了两个参数的重载, 因为回调函数可以省略, 所以可以像开篇实例中使用的, 传入一个数值作为唯一参数, 则会在参数规定的时间内用动画效果显示/隐藏元素:


1. $("#divPop").show(200);    
2. $("#divPop").hide("fast");    
3. $("#divPop").toggle("slow");



如果传递了200, 表示图层会在200毫秒内通过渐变的形式显示出来. speed参数可以使用三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000).

三个函数都可以传入回调函数callback,签名如下:



1. function
2. this; // dom element 
3. }



在回调函数中的this是执行此函数的DOM对象. 会在动画结束时执行.

2. 使用toggle函数

toggle函数是功能更强大的函数, 可以切换元素的可见状态. 我们经常遇到需要使用toggle的情况. 比如希望一段文字第一次单击显示弹出层, 第二次单击隐藏弹出层.

我们将开篇实例稍作修改即可实现这个效果:

 


1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
2. <html xmlns="http://www.w3.org/1999/xhtml">    
3. <head>    
4.      <title>jQuery Animation - Toggle </title>    
5.    
6. "text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>    
7.    
8. "text/javascript">    
9. function()    
10.          {    
11. //动画速度 
12. var
13.    
14. //绑定事件处理 
15. "#btnShow").click(function(event)    
16.              {    
17. //取消事件冒泡 
18.                  event.stopPropagation();    
19. //设置弹出层位置 
20. var
21. "#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });    
22. //切换弹出层的显示状态 
23. "#divPop").toggle(speed);    
24.    
25.              });    
26.          });    
27.      </script>    
28.    
29. </head>    
30. <body>    
31.      <div>    
32.          <br /><br /><br />    
33. "btnShow">提示文字</button>    
34.      </div>    
35.             
36.      <!-- 弹出层 -->    
37. "divPop"
38.          width: 300px; height: 100px;">    
39. "text-align: center;">弹出层</div>    
40.      </div>    
41. </body>    
42. </html>


toggle()函数可以传递一个boolean值的参数, 比如: toogle(true)等同于show(), toogle(fasle)等同于hide().