1、使用方法
obj.animate(params, [duration], [easing], [callback])
用于执行一个基友CSS属性的自定义动画。
参数解释:
1.1.params
对象;指定属性的变化。注:所有属性必须使用骆驼形式,如marginLeft。
1.2.duration
字符串或数字;表示动画时长.如”slow”、500
1.3.easing
字符串;要使用的过渡效果的名称.默认值为swing
1.4.callback
回调函数取值如下:
a)start:
b)step:动画的每一步要执行的函数或者说每步动画执行后回调的函数。
使用方法:obj.step(now,fx)
now是每一步动画属性的数字值;
fx是jQuery.fx原型对象的一个引用.
注意:step函数被每个动画元素的每个动画属性调用。如:
$("img").animate(
{width:'50px',height:'50px'},
{step:function(now,fx)
{//操作
}
})
step函数会被执行4次。
c)progess:每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。
d)complete:动画完成时执行的函数
e)done:动画完成时执行的函数
f)fail:动画失败完成时执行的函数
g)always:动画停止时(包括完成或未完成)执行的函数
h)queue:boolean;表示是否将动画放置在效果队列中。如果为false时，将立即开始动画。
i)specialEasing:
2、动画的关闭
所有的jQuery效果，包括.animate(),都能使用jQuery.fx.off = true来全局性关闭
3、进阶
当使用一系列的动画效果(如hide，show)，这些动画函数都会被放进一个名为”fx”的队列中，然后再以先进先出的方式执行队列中的函数，而非动画函数。
<div></div>
<script>
$("div").animate({height:"50px"},{duration:3000}).css({height:"100px",width:"100px","background-color":"red"});
</script>
此段代码执行后,div会先变为高为100px、宽为100px、背景色为红色，然后再执行动画。原因是:动画效果被加入队列,依据队列的先进后出原则执行,而此时css设置函数已经执行。
参考文章:
jQuery动画高级用法（上）——详解animation中的.queue()函数