jquery自定义动画—-animate使用

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()函数

此条目发表在PHP分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注