jQuery的动画函数主要分为三类:

  1. 基本动画函数: 既有透明度渐变, 又有滑动效果. 是最常用的动画效果函数.
  2. 滑动动画函数: 仅使用滑动渐变效果.
  3. 淡入淡出动画函数: 仅使用透明度渐变效果.

这三类动画函数效果各不相同, 用法基本一致. 大家可以自己尝试.

另外也许上面的三类函数效果都不是我们想要的, 那么jQuery也提供了自定义动画函数, 将控制权放在我们手里让我们自己定义动画效果.

下面对三类内置动画函数和自定义动画函数分别讲解.

基本动画函数 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三个. 都提供了无参数的版本,  表示不适用动画切换元素的显示状态:

$("#divPop").show();$("#divPop").hide();$("#divPop").toggle();

 

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

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

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

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

function callback() {  this; // dom element}
在回调函数中的this是执行此函数的DOM对象. 会在动画结束时执行.


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




   
   
   
   
    
    
    
    
    
  1. ><html xmlns="http://www.w3.org/1999/xhtml"> 
    2. 
    
    
    
    
  2. <head>     
    3. 
    
    
    
    
  3. <title>jQuery Animation - Toggle title> 
    4. 
    
    
    
    
  4. <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js">script>    
    5. 
    
    
    
    
  5. <script type="text/javascript">        $(document).ready(function()        {             
    6. 
    
    
    
    
  6. //动画速度             
    7. 
    
    
    
    
  7. var speed = 500;            
    8. 
    
    
    
    
  8.  //绑定事件处理            
    9. 
    
    
    
    
  9.  $("#btnShow").click(function(event)            {                //取消事件冒泡                
    10. 
    
    
    
    
  10.  event.stopPropagation();                
    11. 
    
    
    
    
  11.  //设置弹出层位置                
    12. 
    
    
    
    
  12.  var offset = $(event.target).offset();                $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });                 
    13. 
    
    
    
    
  13. //切换弹出层的显示状态                
    14. 
    
    
    
    
  14.  $("#divPop").toggle(speed);            });        });    script> 
    15. 
    
    
    
    
  15. head> 
    16. 
    
    
    
    
  16. <body>     
    17. 
    
    
    
    
  17. <div>        
    18. 
    
    
    
    
  18.     <br /><br /><br />         
    19. 
    
    
    
    
  19.    <button id="btnShow">提示文字button>     
    20. 
    
    
    
    
  20. div>             
    21. 
    
    
    
    
  21.      
    22. 
    
    
    
    
  22. <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;        width: 300px; height: 100px;">    
    23. 
    
    
    
    
  23.      <div style="text-align: center;">弹出层div>   
    24. 
    
    
    
    
  24.   div> 
    25. 
    
    
    
    
  25. body> 
    26. 
    
    
    
    
  26. html> 
    27. 
   
   
   
   

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



三. 滑动动画函数

基本动画函数的效果是一个综合了滑动和透明度渐变的函数, jQuery还单独提供了只有滑动效果的相关函数.
滑动动画函数  Sliding


   
   
   
   

    
    
    
    
     
     
     
     

      
      
      
      名称
      
      
      
      说明
      
      
      
      举例
     
     
     
     

     
     
     
     

      
      
      
      slideDown(speed, [callback])
      
      
      
      
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

      
      
      
      用600毫秒缓慢的将段落滑下: 
$("p").slideDown("slow");		
     
     
     
     

     
     
     
     

      
      
      
      slideUp(speed, [callback])
      
      
      
      通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
      
      
      
      用600毫秒缓慢的将段落滑上: 
$("p").slideUp("slow");		
     
     
     
     

     
     
     
     

      
      
      
      slideToggle(speed, [callback])
      
      
      
      通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
      
      
      
      用600毫秒缓慢的将段落滑上或滑下: 
$("p").slideToggle("slow");		
     
     
     
     

    
    
    
    
   
   
   
   


slideDown就是show的滑动效果版本, slideUp就是hide的滑动效果版本, slideToggle就是toggle的滑动效果版本.
参数完全相同:
$("#divPop").slideDown(200);$("#divPop").slideUp("fast");$("#divPop").slideToggle("slow");