+发表新主题
查看: 1876|回复: 0

[代码片段] jquery - 自定义动画

[复制链接]

[代码片段] jquery - 自定义动画

[复制链接]
殷三姗 发表于 2016-2-14 21:03:36 浏览:  1876 回复:  0 [显示全部楼层] |只看大图 回帖奖励 |倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
1.自定义动画

    1.animate(properties,duration,easing,callback)

     * properties - 设置相关动画需要的CSS的属性内容

     * duration - 设置自定义动画执行的时长(毫秒)

     * easing - 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

     * callback - 自定义动画执行完毕后的回调函数



例如：

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>jQuery自定义动画一</title>

  7.   <script src="jquery-1.11.3.js"></script>

  8.   <style>

  9. div {

  10. width : 200px;

  11. height : 200px;

  12. border : solid 1px black;

  13. background : pink;

  14. position : absolute;

  15. top : 100px;

  16. left : 100px;

  17. }

  18.   </style>

  19. </head>

  20. <body>

  21.   <div></div>

  22.   <script>

  23. $("div").animate({

  24. width : 100,

  25. height : 100,

  26. top : 300,

  27. left : 300

  28. },3000,function(){

  29. alert("hello world!!");

  30. });

  31.   </script>

  32. </body>

  33. </html>
复制代码
效果如下：

203752z0444488l049nx84.png

203752z0444488l049nx84.png


   2.animate(properties,options)

     * properties - 设置相关动画需要的CSS的属性内容

     * options - 选项

       * duration - 设置自定义动画执行的时长(毫秒)

       * easing - 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

       * complete - 自定义动画执行完毕后的回调函数

       * queue - Boolean值,(默认值: true) 设定为false将使此动画不进入动画队列


例如：

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>jQuery自定义动画一</title>

  7.   <script src="jquery-1.11.3.js"></script>

  8.   <style>

  9. div {

  10. width : 200px;

  11. height : 200px;

  12. border : solid 1px black;

  13. background : pink;

  14. position : absolute;

  15. top : 100px;

  16. left : 100px;

  17. }

  18.   </style>

  19. </head>

  20. <body>

  21.   <div></div>

  22.   <script>

  23. $("div").animate({

  24. width : 100,

  25. height : 100,

  26. top : 300,

  27. left : 300

  28. },{

  29. duration : 3000,

  30. complete : function(){

  31. alert("hello world!!");

  32. }

  33. })

  34.   </script>

  35. </body>

  36. </html>
复制代码
效果与上一样。


   * 注意 - 有些CSS的属性不能使用

     * backgroundColor

     * borderBottomColor

     * borderLeftColor

     * borderRightColor

     * borderTopColor

     * Color

     * outlineColor

   * 排队与并发效果

     * 并发效果 - 指多个动画同时执行

  

例如：  

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>jQuery自定义动画 -- 并发</title>

  7.   <script src="jquery-1.11.3.js"></script>

  8.   <style>

  9.         div {

  10.                 width : 200px;

  11.                 height : 200px;

  12.                 border : solid 1px black;

  13.                 background : pink;

  14.                 position : absolute;

  15.                 top : 100px;

  16.                 left : 100px;

  17.         }

  18.   </style>

  19. </head>

  20. <body>

  21.   <div></div>

  22.   <script>

  23.         $("div").animate({

  24.                 width : 100,

  25.                 height : 100

  26.         },{

  27.                 duration : 3000

  28.         }).animate({

  29.                 left : 500

  30.         },{

  31.                 duration : 3000,

  32.                 queue : false

  33.         }).animate({

  34.                 top :500

  35.         },{

  36.                 duration : 3000,

  37.                 queue : false

  38.         }).hide(3000);

  39.   </script>

  40. </body>

  41. </html>
复制代码
     * 排队效果 - 指多个动画按照先后顺序执行

  2. <!doctype html>

  3. <html lang="en">

  4. <head>

  5.   <meta charset="UTF-8">

  6.   <title>jQuery自定义动画 -- 排队效果</title>

  7.   <script src="jquery-1.11.3.js"></script>

  8.   <style>

  9.         div {

  10.                 width : 300px;

  11.                 height : 300px;

  12.                 border : solid 1px black;

  13.                 background : pink;

  14.                 position : absolute;

  15.                 top : 100px;

  16.                 left : 100px;

  17.         }

  18.   </style>

  19. </head>

  20. <body>

  21.   <div></div>

  22.   <script>

  23.         $("div").animate({

  24.                 width : 100,

  25.                 height : 100

  26.         }).animate({

  27.                 left : 500

  28.         },{

  29.                 duration : 3000

  30.         }).animate({

  31.                 top : 500

  32.         },{

  33.                 duration : 3000

  34.         })

  35.   </script>

  36. </body>

  37. </html>
复制代码
回复

使用道具 举报

精彩评论 (0) QQ好友和群QQ好友和群

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

殷三姗
技冠群雄

34

主题

36

帖子

106

积分

技冠群雄

Rank: 6Rank: 6

积分
106
英剧迷| 淘大喵| 客家新闻网| 时空赣州网| 赣州新闻网| 赣州信息港| 人人都是产品经理| 91运营网| 梅花网| 亿欧网| 36氪| 申请友链

手机版| 赣南网

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4

用微信扫一扫

赣南网