注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一线天色 天宇星辰

天下武功,唯快不破

 
 
 

日志

 
 

使用JQuery的animate创建自定义动画  

2012-07-05 21:46:36|  分类: 软件开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

animate(params, options) :用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如heighttopopacity)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是hideshowtoggle这样的字符串值,则会为该属性调用默认的动画形式。

参数:

paramsOptions:一组包含作为动画属性和终值的样式属性和及其值的集合

optionsOptions:一组包含动画选项的值的集合。

选项:

durationString,Number(默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easingString(默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" "swing".

completeFunction:在动画完成时执行的函数

stepCallback

queueBoolean(默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

我们直接来看例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE>测试页面</TITLE>

  <META NAME="Generator" CONTENT="一线天色 天宇星辰">

  <META NAME="Author" CONTENT="一线天色 天宇星辰">

  <META NAME="Keywords" CONTENT="一线天色 天宇星辰">

  <META NAME="Description" CONTENT="一线天色 天宇星辰">

  <SCRIPT type="text/javascript" src ="jquery-1.7.2.min.js"> </SCRIPT>

 </HEAD>

 

 <BODY>

  <div id="msg" style="background:green;width:10px;">你好哇</div>

  <button id="go1">等动画加载完成再点我</button>

 <div id="block1" style="background:green;width:50px;color:#FF0000;">Block1</div>

 <div id="block2" style="background:green;width:50px;">Block2</div>

    <script type="text/javascript">

    $(document).ready(function(){

       $("#msg").animate({"width": "+=500px"}, 2000);

       $("#msg").animate({"height": "+=200px"}, "slow");

       $("#msg").animate({"height": "+=200px"}, "fast");

       $("#msg").animate({"height": "-=4000px"}, "normal");

       $("#msg").animate({"height": "+=20px"}, "fast");

       $("#go1").click(function(){

       $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )

                  .animate( { fontSize: '10em' } , 5000 )

                  .animate( { width: "50px"}, 5000 )

                  .animate( { fontSize: '1em' } , 5000 );

    });

 

    $("#go1").click(function(){

       $("#block2").animate( { width: "90%"}, "normal" )

       .animate( { fontSize: '10em' } , "slow" )

       .animate( { width: "50px"}, 2000 )

       .animate( { fontSize: '1em' } , "fast" );

     

    });

 

    });

    </script>

 </BODY>

</HTML>

本例中,block1展示了不使用队列,在放大div的同时扩大字体,而block2则在边框拉到90%时,才放大字体!

更多资料,请参考w3c文档:http://www.w3school.com.cn/jquery/effect_animate.asp

  评论这张
 
阅读(1044)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017