jQuery 动画效果汇总

1.动画方法说明

方法名	说明
hide()和show()方法	同时可修改多个样式属性，即高度，宽度，不透明度
fadeIn()和fadeOut()方法	只改变不透明度
slideUp()和slideDown()方法	只改变高度
fadeTo()方法	只改变不透明度
toggle()方法	用于替代hide()和show()方法，所以能修改高度、宽度、不透明样式
slideToggle()方法	用来代替slideUp()和slideDown()方法，所以只能改变高度
fadeToggle()方法	用来代替fadeIn()和fadeOut()方法，所以只能改变不透明度
animate()方法	属于自定义动画，以上各种动画的实质都是调用了animate()方法，此外，直接使用animate()方法还能定义其他的样式，如“left”“marginLeft”、“ScrollTop”等

    需要特别注意的是，animate()方法可以用来代替其他所有的动画。

•    用animate()方法代替show()方法
   $("p").animate({height:"show",width:"show",opacity:"show"},400); 
   等价于：
    $("p").show(400); 
• 用animate()方法代替fadeIn()方法
   1 $("p").animate({opacity:"show"},400);
   等价于：
    1 $("p").fadeIn(400); 
  
• 用animate()方法代替slideDown()方法
   1 $("p").animate({height:"show"},400); 
   等价于：
    1 $("p").slideDown(400); 
  
• 用animate()方法代替fadeTo方法
   1 $("p").animate({opacity:"0.6"},400); 
   等价于：
    1 $("p").fadeTo(0.6,400); 
• 事实上，这些动画就是animate()方法的一种内置了特定样式属性的简写形式。在animate()方法中，这些特定的样式属性值可以为“show”、“hide”、“toggle”，也可以是自定义的数字（值）
  2.动画队列
  （1） 一组元素上的动画效果
  
• 当在一个animate()方法中应用多个属性时，动画会是发生；
• 当以链式写法应用动画方法时，动画按照顺序 执行；
  （2）多组元素上的动画
• 默认情况下，动画都是同时发生；
• 当以回调函数形式应用动画方式（例如css()方法要使非动画方法也按照顺序执行，需要把这些方法写入发哦动画方法的回调函数中），动画按照回调顺序执行。