首页 > 其他 > 详细

.animate动画

时间:2016-05-03 10:32:49      阅读:256      评论:0      收藏:0      [点我收藏+]

.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动画

原文:http://www.cnblogs.com/heqinglin/p/5453917.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!