animate()的常用options

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>" );
    }
  });