.animate动画

.animate(params, [duration], [easing], [callback])

params: 结果样式属性

duration: 动画时长 也可以用 slow normal fast

easing: 默认jQuery提供"linear" 和 "swing"

callback: 在动画完成时执行的函数,直接写function(){}

animate(params, options)

options:

{queue:默认true,}如果设置false则会跳出队列，直接执行。

例子：

HTML 代码:

<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>

jQuery 代码:

$("#go1").click(function(){
  $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) //脱离队列，会和fontSize一起执行
     .animate( { fontSize: ‘10em‘ } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});

$("#go2").click(function(){
  $("#block2").animate( { width: "90%"}, 1000 )
     .animate( { fontSize: ‘10em‘ } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});

点击按钮1： 宽度和字体大小同时动画，然后边框宽再执行。

点击按钮2： 三个动画按照顺序逐一执行。

结果样式参考：