JQuery中的动画

一、show()方法和hide()方法

这两种方法是jQuery动画的最基本方法。当为元素调用show方法时相当于将该元素的display样式改为block或者inline，同理，如果当元素调用hide方法时，相当于将该元素的样式改为none；因此：$("element").hide()等同于$("element").css("display","none");

ps:hide()方法在将内容的display属性设置为none之前，会记住原先的display属性(除了none之外的值)，当调用show()方法是，会根据hide()方法记住的display属性来显示元素。

show()方法和hide()方法在没有带任何参数的情况下，作用是立即显示或者隐藏匹配的元素，不会有任何动画。如果希望元素能动起来，我们可以为其指定一个速度参数，如$("element").hide("fast")这里的fast是一个速度关键字，记住使用关键字时都要给它加上引号，一共有3个速度关键字：fast==200毫秒，normal==400毫秒，slow==600毫秒。不仅如此我们还可以显示的指定一个具体的数值，单位是毫秒。如$("element").hide(1000);

show()和hide()方法在执行过程中会同时增加/减少内容的高度，宽度和不透明度，直到它们完全显示或消失。

二、fadeIn()方法和fadeOut()方法

   与show()方法不同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度。

fadeOut()方法指在指定的一段时间内降低元素的不透明度，直到元素完全消失。fadeIn()则刚好相反。(经常搞混这两个那个是显示哪个是隐藏，这么记：我们叫人出去一般都吼out，然后他就消失了，当你对一个人说come in，他就出现在你面前了)

三、slideUp()方法和slideDown()方法

slideUp()方法和sildeDown()方法指在一段时间内改变元素的高度。slideUp()方法呢是指匹配的元素从下往上慢慢消失。slideDown()呢是指匹配的元素从上往下慢慢显示；这个还比较好记。

四、自定义动画方法animate()

在很多情况下，上面的三种方法无法满足用户的各种需求，那么久需要对元素有更多的控制，在jQuery中可以使用animate()方法来自定义动画；其语法结构：

animate(params,speed,callback);
//params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",....}
//speed:速度参数，可选。
//callback:在动画完成时执行的函数，可选

这里来详细了解哈callback的用法。如以下代码：

$(function(){
$("#a").click(function(){
     $(this).animate({left:"200px",heigth:"300px",opacity:"1"},3000)
              .animate({top:"200px",width:"300px"},3000)
              .css("border","5px solid blue")
  })
})

其实这段代码的本意是：在点击a元素后，让该元素在3秒内先向距左200px，同时高度改为300px，不透明度变为1，然后完成上面的动作后该元素在又一个3秒内距上200px，高度变为300px，最后在为该元素设置border。但是上面的代码并不能够达到预期的值，实际上在刚开始执行动画的时候，css()方法就执行了，原因是css()方法并不会出现在动画队列中，而是立即执行，那么怎么改动代码才能实现预期的效果呢？这是就可以使用回调函数了。如下：

$(function(){
   $("#a").click(function(){
       $(this).animate({left:"200px",height:"300px",opacity:"1"},3000)
                 .animate({top:"200px",width:"300px"},3000,function(){
                       $(this).css("border":"5px solid blue");
})
  }}
})

它的作用就是在前面的动画执行完成后，才开始做function内的事情。

PS：callback回调函数适用于jQuery所有的动画效果方法。

五、停止动画和判断是否处于动画状态

很多时候都需要停止匹配元素正在进行的动画，如果需要某处停止动画，需要使用stop()方法，其语法结构：stop([clearQueue],[gotoEnd]);其中clearQueue和gotoEnd()都是可选参数，它们均为Boolean值，其中clearQueue代表是否要清空未执行的动画队列，gotoEnd代表是否将正在执行的动画跳转到末状态。当然如果直接使用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续，则以当前状态开始接下来的动画。

六、判断元素是否处于动画状态

在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致，当用户快速在某个元素上执行animate()动画时，就会出现动画积累。解决的方法是判断元素是否处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。代码如下：

if(!$(element).is(":animate")){
      //如果当前元素没有进行动画，则添加新动画
}
//这个判断方法经常在animate()动画中被使用，所以需要特别注意

七、延迟动画

在动画执行过程中如果想对动画进行延迟操作，那么可以调用delay()方法。使用方法如下：

$(this).animate({left:"400px",height:"200px"},3000).delay(1000)

delay()方法允许我们将队列中的函数延时执行，它既可以推迟动画队列中函数的执行，也可以自定义队列。

八、其他动画方法

除了上面的提到的方法以外，jQuery中还有4个专门用于交互的动画方法。toggle(speed,[callback]),slideToggle(speed,[easing],[callback]),fadeTo(speed,opacity,[callback]),fadeToggle(speed,[easing],[callback]).

(1)toggle()方法：它可以切换元素的可见状态，如果元素可见，则切换为隐藏，如果元素隐藏，则切换为显示。实际上：

$("#a").click(function(){
      $(this).next().toggle();
})

//等价于

$("#a").toggle(function(){
      $(this).next().show();
},function(){
      $(this).next().hide();
})
//这种写法在1.9版本的jQuery库里会出现问题

 总结：

(1)一组元素上的动画效果

当在一个animate()方法中应用多个属性时，动画时同时发生的。当以链式的写法应用动画方法时，动画是按照顺序发生的(除非queue的选项值为false)

(2)多组元素上的动画效果

默认情况下，动画都是同时发生的。当以回调的形式应用动画时(包括动画的回调函数和queue()方法的回调函数)，动画是按照回调顺序发生的。

另外，在动画方法中要考虑其他非动画方法会会插队，例如css()方法，要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中或者queue()方法中。