.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：三个动画按照顺序逐一执行。

结果样式参考：

styles

可能的 CSS 样式值（提供实例）：

注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

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

animate(params, options)

例子：

HTML 代码:

相关文章