jquery 的动画

1. show() 和hide() 方法

这两个方法和 element.css(“display”,”none”); // 通过css()方法隐藏元素

show(“slow”)

• slow ： 600ms 显示出来
• normal： 400ms 显示出来
• fast：200ms 显示出来

同时也可以show(1000) 指定显示的时间

2. fadeIn() 和fadeOut() 方法 只改变元素的透明度直到元素完全消失

3. slideUp() 和 slideDown 只会改变元素的高度,当一个元素display的属性值”none”,当调用slideDown() 方法，这个元素将由上而下延生显示。slideUp()相反

4. 自定义动画方法 animate()

   
   
   
   

    
    
    
    
     1 
    
    
    
    animate(params,speed,callback); 
    
    
    
     2 
    
    
    
     
    
    
    
     3 
    
    
    
    params 一个包含样式属性及值的映射。比如{property1:value1,property2:value2} 
    
    
    
     4 
    
    
    
     
    
    
    
     5 
    
    
    
    speed: 速度参数，可选 
    
    
    
     6 
    
    
    
     
    
    
    
     7 
    
    
    
    callback: 在动画完成时执行的函数，可选 
    
    
    
     8 
    
    
    
     
    
    
    
     9 
    
    
    
    $(
    
    
    
    function
    
    
    
    (){ 
    
    
    
    10 
    
    
    
     
    
    
    
    11 
    
    
    
    $(“#panel”).click(
    
    
    
    function
    
    
    
    (){ 
    
    
    
    12 
    
    
    
     
    
    
    
    13 
    
    
    
     $(
    
    
    
    this
    
    
    
    ).animate({left:”500px”},
    
    
    
    3000
    
    
    
    ); 
    
    
    
    14 
    
    
    
     
    
    
    
    15 
    
    
    
    }) 
    
    
    
    16 
    
    
    
     
    
    
    
    17 
    
    
    
    }) 
    
    
    
    18 
    
    
    
     
    
    
    
    19 
    
    
    
    累加，累减法动画 
    
    
    
    20 
    
    
    
     
    
    
    
    21 
    
    
    
    $(
    
    
    
    function
    
    
    
    (){ 
    
    
    
    22 
    
    
    
     
    
    
    
    23 
    
    
    
    $(“#panel”).click(
    
    
    
    function
    
    
    
    (){ 
    
    
    
    24 
    
    
    
     
    
    
    
    25 
    
    
    
    $(
    
    
    
    this
    
    
    
    ).animate({left:”
    
    
    
    +=
    
    
    
    500px”},
    
    
    
    300
    
    
    
    ); 
    
    
    
    26 
    
    
    
     
    
    
    
    27 
    
    
    
    }) 
    
    
    
    28 
    
    
    
     
    
    
    
    29 
    
    
    
    }) 
    
    
    
    30 
    
    
    
     
    
    
    
    31 
    
    
    
    多重动画 
    
    
    
    32 
    
    
    
     
    
    
    
    33 
    
    
    
    $(
    
    
    
    function
    
    
    
    (){ 
    
    
    
    34 
    
    
    
     
    
    
    
    35 
    
    
    
    $(“#panel”).click(
    
    
    
    function
    
    
    
    (){ 
    
    
    
    36 
    
    
    
     
    
    
    
    37 
    
    
    
    $(
    
    
    
    this
    
    
    
    ).animate({left:”500px”,height:”200px”},
    
    
    
    3000
    
    
    
    ); 
    
    
    
    38 
    
    
    
     
    
    
    
    39 
    
    
    
    }) 
    
    
    
    40 
    
    
    
     
    
    
    
    41 
    
    
    
    }) 
    
    
    
    42 
    
    
    
     
    
    
    
    43 
    
    
    
    综合效果 
    
    
    
    44 
    
    
    
     
    
    
    
    45 
    
    
    
    $(
    
    
    
    function
    
    
    
    (){ 
    
    
    
    46 
    
    
    
     
    
    
    
    47 
    
    
    
    $(“#panel”).click(
    
    
    
    function
    
    
    
    (){ 
    
    
    
    48 
    
    
    
     
    
    
    
    49 
    
    
    
     $(
    
    
    
    this
    
    
    
    ).animate({left:”500px”,height:”200px”,opacity:”
    
    
    
    1
    
    
    
    ”},
    
    
    
    3000
    
    
    
    ) 
    
    
    
    50 
    
    
    
     
    
    
    
    51 
    
    
    
     .animate({top:”200px”,width:”200px”},
    
    
    
    3000
    
    
    
    ) 
    
    
    
    52 
    
    
    
     
    
    
    
    53 
    
    
    
     .fadeOut(“slow”); 
    
    
    
    54 
    
    
    
     
    
    
    
    55 
    
    
    
    }) 
    
    
    
    56 
    
    
    
     
    
    
    
    57 
    
    
    
    }) 
    
    
    
    58 
    
    
    
    
   
   
   
   

5. 如果动画在正在运动，需要在某处某处停止，需要使用stop()

stop([clearQueue][,gotoEnd]);

参数clearQueue和gotoEnd都是可选的参数,为Boolean ,clearQueue代表是否要清空为执行完的动画队列，goto代表是否直接将正在执行的动画跳转到末状态。

判断用户是否正在执行动画

if(!$(element).is(“:animated”)){ // 判断元素是否处于动画状态

 

}