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

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

jQuery animate 深入探讨  

2015-05-17 23:52:53|  分类: jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在jQuery中,方法存在着许多语法,也就是说参数设置不同,但是可以实现同种的功能。今天主要给大家讲解jQuery animate的语法,接下来来看看animate的语法。
语法一:
jQuery animate 深入探讨 - 梦幻雪冰 - 梦幻雪冰
 
语法二:
jQuery animate 深入探讨 - 梦幻雪冰 - 梦幻雪冰
 
实例一:
JQ animate只能支持CSS的属性值是数字值(单位是px、em、%)才可以创建动画,如果要使背景颜色也有动画,需要引入一个插件jQuery.Color( );   点击下载——访问密码 236d
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>梦幻雪冰</title>
  6.     <link rel="stylesheet" href="reset.css">
  7.     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  8.     <script src="jquery.color.js"></script>
  9.     <style>
  10.         .wrap {
  11.             width: 200px;
  12.             height: 200px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="wrap">梦幻雪冰</div>
  18.     <script>
  19.         var test = $(".wrap");
  20.         test.animate({
  21.             "background-color" : "#fcf"
  22.         }, 1000)
  23.     </script>
  24. </body>
  25. </html>

实例二:
JQ animate属性值除了可以设置数字值外,每个属性可以设置字符串show、hide、toggle;
  1. <!doctype html>
  2. <html>
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <title>梦幻雪冰</title>
  6.      <link rel="stylesheet" href="reset.css">
  7.      <script src="jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
  8.      <style>
  9.           .main {
  10.                /*默认隐藏*/
  11.                display: none;
  12.                width: 300px;
  13.                height: 300px;
  14.                background-color: #999;
  15.           }
  16.      </style>
  17. </head>
  18. <body>
  19.      <div class="btn">
  20.           <input type="button" value="(hide)点击隐藏">
  21.           <input type="button" value="(show)点击显示">
  22.      </div>
  23.      <div class="main">梦幻雪冰</div>
  24.      <script>
  25.           // 默认为隐藏
  26.           var mainCon = $(".main");
  27.           
  28.           $(".btn input").click(function() {
  29.                if ($(this).index()) {
  30.                     mainCon.stop(true, true).animate({
  31.                          "width": "show",
  32.                          "height": "show"
  33.                     }, 2000);
  34.                } else {
  35.                     mainCon.stop(true, true).animate({
  36.                          "width": "hide",
  37.                          "height": "hide"
  38.                     }, 2000);
  39.                }
  40.           });
  41.      </script>
  42. </body>
  43. </html>
结果:
jQuery animate 深入探讨 - 梦幻雪冰 - 梦幻雪冰
 
  1. <!doctype html>
  2. <html>
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <title>梦幻雪冰</title>
  6.      <link rel="stylesheet" href="reset.css">
  7.      <script src="jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
  8.      <style>
  9.           .main {
  10.                width: 300px;
  11.                height: 300px;
  12.                background-color: #999;
  13.           }
  14.      </style>
  15. </head>
  16. <body>
  17.      <div class="btn">
  18.           <input type="button" value="(toggle)状态切换">
  19.      </div>
  20.      <div class="main">梦幻雪冰</div>
  21.      <script>
  22.           var mainCon = $(".main");
  23.           $(".btn input").click(function() {
  24.                mainCon.stop(true, true).animate({
  25.                     "height": "toggle",
  26.                     "width": "toggle"
  27.                }, 2000);
  28.           });
  29.      </script>
  30. </body>
  31. </html>
结果:
jQuery animate 深入探讨 - 梦幻雪冰 - 梦幻雪冰
 
实例三:
jQuery 动画属性也可以是相对的。如果一个值提供了一个+=和 -=操作符号,那么目标值=当前的值 +|- 给定添加的值。
  1. <!doctype html>
  2. <html>
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <title>梦幻雪冰</title>
  6.      <link rel="stylesheet" href="reset.css">
  7.      <script src="jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
  8.      <style>
  9.           .main {
  10.                width: 300px;
  11.                height: 300px;
  12.                background-color: #999;
  13.           }
  14.      </style>
  15. </head>
  16. <body>
  17.      <div class="btn">
  18.           <input type="button" value="点击">
  19.      </div>
  20.      <div class="main">梦幻雪冰</div>
  21.      <script>
  22.           // 默认为隐藏
  23.           var mainCon = $(".main");
  24.           $(".btn input").click(function() {
  25.                mainCon.stop(true, true).animate({
  26.                     "width": "+=50px",
  27.                     "height": "-=50px"
  28.                }, 3000);
  29.           });
  30.      </script>
  31. </body>
  32. </html>

实例四:
jQuery animate的其他写法
  1. <!doctype html>
  2. <html>
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <title>梦幻雪冰</title>
  6.      <link rel="stylesheet" href="reset.css">
  7.      <script src="jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
  8.      <style>
  9.           .main {
  10.                width: 300px;
  11.                height: 300px;
  12.                background-color: #999;
  13.           }
  14.           .test {
  15.                width: 200px;
  16.                height: 200px;
  17.                background-color: #fcf;
  18.           }
  19.      </style>
  20. </head>
  21. <body>
  22.      <div class="test"></div>
  23.      <div class="main">梦幻雪冰</div>
  24.      <script>
  25.         $(".main").animate({
  26.               height: "500px"
  27.             },{    
  28.               queue: true,
  29.               duration: 2000,
  30.               step: function(now, fx){
  31.                 $(".test").css( "width", now);
  32.             }
  33.         });
  34.      </script>
  35. </body>
  36. </html>
jQuery queue指示是否在效果队列中放置动画(形成一个链式动画)。如果为 false,则动画将立即开始,如果为true则是链式动画
  1. <!doctype html>
  2. <html>
  3. <head>
  4.      <meta charset="UTF-8">
  5.      <title>H5course</title>
  6.      <link rel="stylesheet" href="reset.css">
  7.      <script src="jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
  8.      <style>
  9.           .main {
  10.                width: 300px;
  11.                height: 300px;
  12.                border: 20px solid red;
  13.                background-color: #999;
  14.           }
  15.      </style>
  16. </head>
  17. <body>
  18.      <div class="main">梦幻雪冰</div>
  19.      <script>
  20.       $(".main").animate({
  21.           width: "90%"
  22.         }, {    
  23.          queue: false,    
  24.          duration: 3000
  25.       }).animate({
  26.         fontSize: "24px" 
  27.       }, 500 ).animate({ 
  28.         borderRightWidth: "50px" 
  29.       }, 500 );
  30.      </script>
  31. </body>
  32. </html>


欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
梦幻雪冰微博——梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
HTML5学堂官网——HTML5学堂
HTML5学堂微信
setInterval和setTimeout参数剖析 - 梦幻雪冰 - 梦幻雪冰
  评论这张
 
阅读(120)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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