animate()
有些复杂的动画靠上面几个函数不能够实现,这时候就是强大的animate派上用场的时候了,animate()有两种用法
.animate( properties [, duration ] [, easing ] [, complete ] )
大部分属性都不用解释,properties是个json,属性的值可以是字面量、function、”toggle”、简单表达式,如果是function会把返回值赋给属性,熟悉jQuery的同学肯定明白“toggle”是什么,就是让一个属性在初始值和最小值之间切换,能够使用toggle的属性有width、height、opacity等包含数字值属性,简单表达式是+=、-=等,比如可以这么些 “width”:”+=10px”。
$( "#block" ).animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "+=10px" }, 1500 );
如果传入了回掉函数,该函数会在动画执行完后调用
.animate( properties, options )
这种用法更为灵活,properties和前一个用法一样,常用options有
duration:动画时间//执行animate的时间
queue:function队列
step:每次属性调整的回掉函数
complete:完成动画的回掉函数
start:动画开始的时候调用
always:动画被终止或者意外发生没有执行完时发生
要不说jQuery好用,上面这几个配置是不是很熟悉呢
$( "#book" ).animate({ width: "toggle", height: "toggle" }, { duration: 5000, specialEasing: { width: "linear", height: "easeOutBounce" }, complete: function() { $( this ).after( "<div>Animation complete.</div>" ); } });