jQuery开发之动画二

1，停止动画和判断是否处于动画状态
(1)停止元素的动画。
很多时候需要用stop()方法来停止当前正在执行的动画。stop()方法的语法如下：

stop([clearQueue],[gotoEnd]);

参数clearQueue和gotoEnd都是可选的参数，为Boolean值(true或false),clearQueue代表是否要清空未执行完的动画队列，gotoEnd 代表是否将正在执行的动画跳转到末状态。
如果直接使用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。
举个例子，在为一个元素绑定hover事件之后，用户把光标移入元素时会触发动画效果，而当这个动画还没结束时，用户就将光标移出这个元素了，那么光标移出的动画效果将被放进队列之中，等待光标移入的动画效果结束后在执行，因此如果光标移入移出的过快就会导致动画效果与光标的动作不一致。此时只要在光标的移入移出之前加入stop()方法，就可以解决这个问题。
jQuery示例代码如下：

$("#panel").hover(function(){
$(this).stop();
.animate({"height":"200px","width":"200px"},3000);
}.function(){
$(this).stop();
.animate({"height":"100px","width":"100px"},3000);
})

如果遇到组合动画，示例代码如下：

$("#panel").hover(function(){
$(this).stop();
.animate({"height":"200px"},3000)
.animate({"width":"200px"},3000);
}.function(){
$(this).stop();
.animate({"height":"100px"},3000)
.animate({"width":"100px"},3000);
})

此时，只用一个不带参数的stop()已经显得力不从心了。因为 stop(）只会停止正在进行的动画。如果动画在执行改变高度的动画animate({“height”:”200px”},3000)，此时移出光标， 只会定制当前的动画，并且接着执行改变宽度的动画 animate({“width”:”200px”},3000)，这显然不是预期的结果。这种情况下stop()方法的第一个参数就发挥作用了，可以把第一个参数(clearQueue)设置为true.此时程序会把当前元素尚未执行的动画队列清空，把上面的代码改为如下代码就能够达到预期了。

$("#panel").hover(function(){
$(this).stop(true);
.animate({"height":"200px"},3000)
.animate({"width":"200px"},3000);
}.function(){
$(this).stop(true);
.animate({"height":"100px"},3000)
.animate({"width":"100px"},3000);
})

第2个参数（gotoEnd）可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过stop(false,true) 这种方式来让当前动画直接达到末状态。当然也可以两者结合起来使用stop(true,true) ，即停止当前动画，并达到当前动画的末状态，并清空动画队列。

注意：jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。例如有一组动画：

$("div.content")
.animate({"height":"200px"},3000)
.animate({"width":"200px"},3000)
.animate({"opacity":"0.2"},3000);

无论怎么设置stop(),均无法在改变width活着height的时候，将此

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

if(!$(element).is(":animated")){//判断用户是否处于动画状态
// 如果当前没有进行动画，则添加新动画
}

(3)延迟动画
示例代码如下：

$(this).animate({"height":"200px"},3000)
.delay(2000)
.animate({"width":"200px"},3000);

delay()方法允许我们将队列中的函数延时执行，也可以用于自定义队列。

2，其他动画方法

jQuery中还有4个专门用于交互的动画方法。

toggle(speed,[callback])
slideToggle(speed,[easing],[callback])
fadeTo(speed,opacity,[callback])
fadeToggle(speed,[easing],[callback])

(1)toggle()方法
toggle()方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的；如果元素为隐藏的，则切换为可见的。
示例代码如下：

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

相当于：

$("p").toggle(function(){
$(this).next().hide();
}.function(){
$(this).next().show();
})

(2)slideToggle()方法
slideToggle()方法通过高度变化来切换匹配元素的可见性，这个动画效果只调整元素的高度。
示例代码如下：

$("p").click(function(){
$(this).next().slideToggle();
})

相当于：

$("p").toggle(function(){
$(this).next().slideUp();
}.function(){
$(this).next().slideDown();
})

(3)fadeTo()方法
fadeTo()方法可以把元素的不透明度以渐进的方式调整到指定的值。这个动画之调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。
示例代码如下：

$("p").click(function(){
$(this).next(). fadeTo(3000,0.3);//3000毫秒后，透明度渐变为0.2
})

(4)fadeToggle()方法
fadeToggle()方法通过改变匹配元素的不透明度来切换元素的可见性。这个动画效果只调整元素的不透明度。示例代码如下：

$("p").click(function(){
$(this).next().fadeToggle();
})

相当于：

$("p").toggle(function(){
$(this).next().fadeOut();
}.function(){
$(this).next().fadeIn();
})

3,动画方法概括

动画队列
(1)一组元素上的动画队列
当在一个animate()方法中应用多个属性时，动画是同时发生的。
当以链式的写法应用动画方法时，动画是按照顺序发生的。

(2)多组元素上的动画效果。
默认情况下动画都是同时发生的。
当以回调的形式应用动画方式时，动画是按照回调顺序发生的。

注意：
另外在动画方法中，注意非动画方法会插队。例如：css()方法要使非动画方法也按顺序执行，需要把这些方法写在动画方法的回调中。