jquery动画课程(6)

官方文档：

$.fn.animate

animate是我们最常用的动画函数，也是jQuery动画中的核心。

animate有下面两种参数形式：

animate( properties [, duration ] [, easing ] [, complete ] )
animate( properties, options )

常见的用法是第一种，因为大家都很熟悉就不讲解了。

重点说下第二种形式，传入两个对象，第一个对象是css属性对象，第二个是动画属性对象。

一、css属性对象

所有数值型的css属性都可以用。非数值型，如color，css3中的rotate等均无法触发animate函数。

//有效
$().animate(
        {
            'left':'500px'
        }
);
//无效
$().animate(
        {
            'color':'#333'
        }
);

animate所作用的数字值单位默认是px，所以{‘left’:’500px’}和{‘left’:500}是等效的。你还可以使用em和%作为单位。

对于css属性中含有破折号的属性名，在这里需要将破折号去掉并把破折号后第一个字母大写。如：font-size改写成fontSize。

二、动画属性对象

一共11个。

duration (default:400) (type:number或string) 动画时间
easing (default:swing) (type:string) 动画效果或者说缓动效果
specialEasing (type:plainObject) 指定css属性的动画效果
queue (default:true) (type:boolean) 是否放入队列
step (type:function(now, tween)) 每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
complete (type:function) 在动画完成时执行的函数。

下面这些是1.8版本后才开始支持：

start (type:function(promise)) 在动画开始执行时的函数。
progress (type:function(promise, progress, remains)) 在动画完成时执行的函数。
done (type:function(promise, jumpToEnd)) 在动画完成时执行的函数。 (它的Promise对象状态已完成)
fail (type:function(promise, jumpToEnd)) 动画失败完成时执行的函数。(它的Promise对象状态未完成)。
always (type:function(promise, jumpToEnd)) 在动画完成或未完成情况下停止时执行的函数。(它的Promise对象状态已完成或未完成)。

详解：

1、duration值越大，动画时间越久。

2、easing默认是swing，还有可选的linear效果。

linear是线性，即匀速运动。
swing是摆动，即中间速度比前后速度慢。

他们运动的速度可以用下图来展示：

3、specialEasing是给特定的动画属性指定缓动效果：

$().animate(
        {
            'left': '500px',
            'top': '500px'
        },
        {
            'specialEasing': {
                'left': 'linear',
                'top': 'swing'
            }
        }
);

上面的left值变化是linear的，top值变化是swing的。

4、queue我们再熟悉不过了，之前的课程已经详细讲过。这里queue设置为false，即不在队列，所以会马上执行。参考(http://www.javiermu.com/jquery-effects-4-queue-dequeue/)

5、step后续课程会讲解。

6、complete

$().animate(
        {
            'left': '500px',
            'top': '500px'
        },
        {
            'complete': function () {
                console.log('complete!');
            }
        }
);

动画结束后，控制台输出complete!

7、start,progress,done,fail,always他们都基于新增的promise对象来触发的。

$().animate(
        {
            'left': '500px',
            'top': '500px'
        },
        {
            'start': function () {
                console.log('start!');
            },
            'progress': function () {
                console.log('progress...');
            },
            'done': function () {
                console.log('done!');
            },
            'fail': function () {
                console.log('fail!');
            },
            'always': function () {
                console.log('i am always here.');
            }
        }
);

promise对象有下列属性：