jQuery中的动画

jQuery中的动画

show()方法和hide()方法

控制元素的显示与隐藏，可以为该方法添加参数，使得元素可以动起来。

• 可以为该方法传递一个速度关键字slow、normal、fast（600毫秒、400毫秒、200毫秒）
• 可以为该方法的显示速度指定一个数字，单位是毫秒（1000毫秒）

fadeIn()方法和fadeOut()方法

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

slideDown()方法和slideUp()方法

slideDown()方法和slideUp()方法只会改变元素的高度

自定义动画方法animate()

animate(params,speed,callback);

1. params：一个包含岩石属性及值的映射，比如{property1:'value1',prperty2:'value2',...}
2. speed：速度参数，可选
3. callback：在动画完成时的执行函数，可选
   综合动画示例

$('div').mouseover(function () {
    $(this).animate({
        left: '+=300px',
        top: '+=300px',
        width: '200px',
        height: '200px',
        opacity: '0.3'
    },2000).animate({
        left: '+=300px',
        top: '-=300px',
        width: '100px',
        height: '100px',
        opacity: '1'
    },2000).fadeOut('3000');
});

自定义动画方法animate()

在上例中，若想在动画完成之后为div元素添加一个边框css('border','1px solid #0f0')。这样并不能得到预期的效果，而实际效果就是，刚开始执行动画的时候，css()的方法就执行了。其根本原因在于css()并不会加入到动画队列中，而是会立即执行。
如果想要达到预期的效果，我们需要把使用回调函数callback来对非动画方法实现排队

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

1.停止元素的动画

很多时候我们需要停止匹配元素正在进行的动画，此时我们需要使用stop()方法
stop([clearQueue],[gotoEnd]);
参数clearQueue与gotoEnd都是可选的，都为Boolean值。clearQueue表示立即清空为执行完的动画，gotoEnd代表是否直接将正在执行的动画跳转到末状态。

直接使用stop()方法，则会立即停止当前正在执行的动画，如果接下来还有动画等待执行，则以当前状态开始接下来的动画。

当为一个使元素绑定hover事件之后，用户把光标移入元素时会触发动画效果，而当这个动画还没结束时，用户就将光标移出了。那么改变移出时执行的动画就会被放入队列中，等待光标移入的动画结束后再执行。因此如果光标 的移入移出过快的话，就会导致动画效果与光标的动作不一致。此时只需要在光标的移入移出的动画之前加入stop()方法，就可解决。

$('div').hover(function () {
    $(this).stop().animate({
        width: '200px',
    });
},function () {
   $(this).stop().animate({
        height: '50px'
    });
});

可是如果遇到组合动画

$('div').hover(function () {
    $(this).stop().animate({
        width: '200px',
    }).animate({
        left: '+=300px',
    });
},function () {
   $(this).stop().animate({
        height: '50px'
    });
});

这时的stop()只会停止正在进行的动画。如果动画正在执行第一阶段（改变width）鼠标触发移出事件之后，只会停止当前的动画，并继续执行改变left的动画，而光标移出事件要等这个动画完成后才能执行。在这种情况下，我们可以设置stop()方法的第一个参数为true，此时程序会把当前元素接下来的尚未执行动画全部清空。第二个参数gotoEnd用于直接让当前动画到达结束时刻，通常用于后一个动画需要基于前一个动画的末状态的情况。

2. 判断元素释放处于动画状态

在使用animate()动画的时候，要避免动画积累导致动画与用户的行为不一致。解决办法就是判断元素是否处于动画状态，如果元素不处于动画状态，才为元素添加新的动画。
及其重要，特别常用

if (!$(element).is(':animated')){   //判断元素释放处于动画状态
    //如果没有处于动画状态，则添加新动画
}

3. 延迟动画

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

 $(this).animate({left: '400px'},3000)
        .delay(1000)
        .animate({top: '100px'},2000)
        .delay(2000)
        .animate({height: '100px'},800);

4. 其他动画方法

• toggle(speed,[callback]) 切换样式的可见状态
• sildeToggle(speed,[easing],[callback]) 通过高度的变化来切换元素的可见性
• fadeTo(speed,opacity,[callback]) 将元素的不透明度以渐进的方法调整到指定值
• fadeToggle(speed,[easing],[callback]) 通过不透明的变化来切换元素的可见性

动画队列

• 当在一个animate()方法中应用多个属性时，动画是同时发生的
• 当以链式写法应用动画方法时，动画是按顺序发生的