[转]jquery自定义动画animate()

标签： | 发表时间：2015-04-16 23:57 | 作者：dxh_0829
出处：http://blog.csdn.net/dxh_0829

在以前很长一段时间里，网页上的各种特效还需要采用flash 在进行。但最近几年里，我们已经很少看到这种情况了，绝大部分已经使用JavaScript 动画效果来取代flash。这里
说的取代是网页特效部分，而不是动画。网页特效比如：渐变菜单、渐进显示、图片轮播等；而动画比如：故事情节广告、MV 等等。


如果复制当前代码进行在本地测试的时候，请注意把不需要（其他功能展示）的代码注释掉。

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script src="jquery-1.11.2.js"></script>  
  7.     <style type="text/css">  
  8.         #box {  
  9.             width: 100px;  
  10.             height: 100px;  
  11.             background-color: red;  
  12.   
  13.             position:absolute;  
  14.         }  
  15.  
  16.         #pox {  
  17.             width: 100px;  
  18.             height: 100px;  
  19.             background-color: green;  
  20.             position: absolute;  
  21.             top: 200px;  
  22.         }  
  23.     </style>  
  24. </head>  
  25. <body>  
  26.     <input type="button" class="button" value="开始" /><input type="button" class="stop" value="停止" />  
  27.     <input type="button" class="ani" value="查找运动中的动画" />  
  28.       
  29.     <div id="box">box</div>  
  30.     <div id="pox">pox</div>  
  31. </body>  
  32. </html>  
  33. <script type="text/javascript">  
  34.     $(function () {  
  35.           
  36.         $(".button").click(function () {  
  37.             $("#box").animate({  
  38.                 left: "300px"    //要想使用left top bottom  right这种方向性的属性 先必须对"#box元素设置CSS 绝对定位  
  39.             })  
  40.         })  
  41.   
  42.   
  43.         //自定义动画中，每次开始运动都必须是初始位置或初始状态，而有时我们想通过当前位置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。  
  44.         $(".button").click(function () {  
  45.             $("#box").animate({  
  46.                 left: "+=50px"  //每点击一次.button按钮，#box元素就往左移动50px  
  47.             })  
  48.         })  
  49.           
  50.   
  51.         //-------------------------------------同步动画   
  52.   
  53.   
  54.   
  55.   
  56.         //一个CSS 变化就是一个动画效果，下面的例子中，已经有四个CSS 变化（分别是width，height，opacity，fontSize的变化）实现了多重动画同步运动的效果。（所谓多重同步运动的效果就是，这四个css属性的值在同一时间，同时变化）  
  57.           
  58.         $(".button").click(function () {  
  59.             $("#box").animate({  
  60.                 width: "300px",  
  61.                 height: "200px",  
  62.                 opacity:0.5, //透明度为0.5  注：透明度的值在0-1之间  
  63.                 fontSize:"200px", //字体大小设为30px  
  64.             }) //第一个参数：是一个对象，他是键值对的css  
  65.         })  
  66.   
  67.   
  68.   
  69.         //--------------------------------------列队动画   
  70.   
  71.   
  72.   
  73.         //通过回调函数现实队列动画。（效果就是：首先#box的宽度变为300px 然后高度变为200px,然后透明度变为50%，字体大小变为150px 最后弹出一个“完毕”）  
  74.         $(".button").click(function () {  
  75.             $("#box").animate({ width: "300px"}, 1000, function(){  
  76.                 $("#box").animate({height:"200px"},1000,function(){  
  77.                     $("#box").animate({opacity:0.5},1000,function(){  
  78.                         $("#box").animate({fontSize:"150px"},1000,function(){alert("完毕")})  
  79.                     });  
  80.                 });  
  81.             });  
  82.         })  
  83.   
  84.         //在同一个元素的基础上，使用链式调用也可以实现列队动画  
  85.         $(".button").click(function () {  
  86.             $("#box")  
  87.                 .animate({ width: "300px" }, 1000)  
  88.                 .animate({ height: "200px" }, 1000)  
  89.                 .animate({ opacity: 0.5 }, 1000)  
  90.                 .animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕")})  
  91.         });  
  92.   
  93.         //在同一个元素的基础上，通过依次顺序实现列队动画 (如果有多个元素则不能实现，两个元素之间的动画是同步的。)  
  94.         $(".button").click(function () {  
  95.             $("#box").animate({ width: "300px" }, 1000);  
  96.             $("#box").animate({ height: "200px" }, 1000);  
  97.             $("#box").animate({ opacity: 0.5 }, 1000);  
  98.             $("#box").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕")});  
  99.   
  100.         })  
  101.   
  102.         //如果有多个元素则不能实现 不信请看下面代码  (通过执行下面这段代码，我们发现#box 与#pox这两个元素的动画是同时执行的，属于#box的那两段动画是先执行 $("#box").animate({ width: "300px" }, 1000)然后再执行("#box").animate({ opacity: 0.5 }, 1000); 他们两个有列队动画的效果) 而属于#pox的两段动画是先执行 $("#pox").animate({ height: "200px" }, 1000)然后再执行 $("#pox").animate({ fontSize: "150px" }, 1000)他们两个有列队动画的效果。 但是 $("#box").animate({ width: "300px" }, 1000)与$("#pox").animate({ height: "200px" }, 1000); 同时执行的。 $("#box").animate({ opacity: 0.5 }, 1000)与$("#pox").animate({ fontSize: "150px" }, 1000)是同时执行的。  
  103.         //前面说了这么一大堆 其实就是：  
  104.         //#box的第一条和第三条是列队动画  
  105.         //#pox的第二条和第四条是列队动画  
  106.   
  107.         //#box的第一条和#pox的第二条是同步动画  
  108.         //#box的第三条和#pox的第四条是同步动画  
  109.   
  110.         $(".button").click(function () {  
  111.             $("#box").animate({ width: "300px" }, 1000);  
  112.             $("#pox").animate({ height: "200px" }, 1000);  
  113.             $("#box").animate({ opacity: 0.5 }, 1000);  
  114.             $("#pox").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕")});  
  115.         })  
  116.   
  117.   
  118.         //那我们现在的需求是：不管你有几个元素，我都要他们依次实现列队动画效果。(测试了一下，只能用这种回调函数嵌套的方式来实现了)  
  119.   
  120.         $(".button").click(function () {  
  121.             $("#box").animate({ width: "300px" }, 1000, function () {  
  122.                 $("#pox").animate({ height: "200px" }, 1000, function () {  
  123.                     $("#box").animate({ height: "200px"}, 1000, function () {  
  124.                         $("#pox").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕") });  
  125.                     })  
  126.                 })  
  127.             })  
  128.         })  
  129.   
  130.   
  131.   
  132.         // ---------------------------------动画与非动画 进行队列 【queue()】  
  133.   
  134.   
  135.   
  136.   
  137.         //我们知道动画可以有列队效果。但是一个普通的css（比如改变背景颜色）如果实现与动画进行列队呢？  
  138.         $(".button").click(function () {  
  139.             $("#box").slideUp(1000).slideDown(1000).css("background", "yellow")  
  140.         })  
  141.   
  142.         //本来我们是想要实现队列动画的，也就是先让#box滑动隐藏，然后再让它滑动显示，最后让它改变颜色。可是我们运行这段呢代码，我们看到第一时间就执行了css("background","yellow")这段代码。  
  143.         //通过上面的代码我们了解到 css()方法不是动画方法，会和第一个动画同时执行。也就是说非动画不能列队。  
  144.   
  145.         //现在问题又来了。我现在想要实现列队动画，也想非动画和动画一起列队怎么办呢？ 其实我们可以使用回调函数实现的。请看下面的代码  
  146.   
  147.         $(".button").click(function () {  
  148.             $("#box")  
  149.                 .slideUp(1000)  
  150.                 .slideDown(1000, function () { $(this).css("background", "yellow") })  
  151.                 .hide(3000);  
  152.         })  
  153.   
  154.         //但如果上面这样的话，当列队动画繁多的时候，可读性不但下降，而原本的动画方法不够清晰。所以，我们的想法是每个操作都是自己独立的方法。那么jQuery 提供了一个类似于回调函数的方法：.queue()  
  155.   
  156.         $(".button").click(function () {   //三个动画。  
  157.             $("#box")  
  158.                 .slideUp(1000)  
  159.                 .slideDown(1000)  
  160.                 .queue(function () { $(this).css("background", "yellow");})  
  161.         })  
  162.   
  163.         //现在，我们想继续在.queue()方法后面再增加一个隐藏动画，这时发现居然无法实现。这是.queue()特性导致的。有两种方法可以解决这个问题，jQuery 的.queue()的回调函数可以传递一个参数，这个参数是next 函数，在结尾处调用这个next()方法即可再链式执行列队动画。  
  164.   
  165.         //链式编程实现队列动画  
  166.         $(".button").click(function () {  //四个动画  
  167.             $("#box")  
  168.                 .slideUp(1000)  
  169.                 .slideDown(1000)  
  170.                 .queue(function (next) { //这个next是一个函数  
  171.                     $(this).css("background", "yellow");  
  172.                     next();})  
  173.                 .hide(1000);  
  174.         });  
  175.   
  176.         //顺序编程实现队列动画  我们看到使用顺序调用的列队，逐个执行，非常清晰  
  177.         $(".button").click(function () {  
  178.             $("#box").slideUp(1000);  
  179.             $("#box").slideDown(1000);  
  180.             $("#box").queue(function (next) {  
  181.                 $(this).css("background", "yellow");  
  182.                 next(); });  
  183.             $("#box").hide(1000);  
  184.         });  
  185.   
  186.           
  187.   
  188.         //因为next 函数是jQuery1.4 版本以后才出现的，而之前我们普遍使用的是.dequeue()方法。意思为执行下一个元素列队中的函数。  
  189.         //使用.dequeue()方法执行下一个函数动画  
  190.         //$(".button").click(function () {  
  191.         //    $('#box').slideUp('slow').slideDown('slow').queue(function () {  
  192.         //        $(this).css('background', 'orange');  
  193.         //        $(this).dequeue(); //相当于上面的那句next() 只是这里的function（）括号里不像上面那样需要传递一个next函数  
  194.         //    }).hide(1000)  
  195.         //});  
  196.   
  197.   
  198.         //-----------------------------动画的清除 【clearQueue()】  
  199.   
  200.   
  201.   
  202.         //jQuery 还提供了一个清理列队的功能方法：.clearQueue()。把它放入一个列队的回调函 数或.queue()方法里，就可以把剩下为执行的列队给移除。  
  203.   
  204.         //清理动画列队  
  205.   
  206.         //假如我想在执行完第二个动画那就就不再执行了。那么只要在第二个动画的回调函数哪里添加一句$(this).clearQueue()就可以停止后面的列队动画了  
  207.         $(".button").click(function () {  
  208.               
  209.             $("#box")  
  210.                 .slideUp(1000)  
  211.                 .slideDown(1000, function () { $(this).clearQueue() })  
  212.                 .queue(function (next) { $(this).css("background", "yellow"); next() })  
  213.                 .hide(1000);  
  214.         })  
  215.   
  216.         //那么如果获取列队动画的长度呢？    
  217.   
  218.         function getQueueCount() {  
  219.             return $("#box").queue("fx").length;  //获取当前列队的长度，fx 是默认列队的参数  
  220.         }  
  221.           
  222.         //用法  
  223.         $(".button").click(function () {  
  224.   
  225.             //下面这段代码总共有slideUp，slideDown，queue，hide这四个动画  
  226.             $("#box")  
  227.                 .slideUp(1000, function () { alert(getQueueCount()) }) //执行到这一步的时候会打印出：4  它后面还有三个动画，所以下一步的时候会打印出3  
  228.                 .slideDown(1000, function () { alert(getQueueCount()) }) //执行到这一步的时候会打印出：3  
  229.                 .queue(function (next) { alert(getQueueCount()); $(this).css("background", "yellow"); next() })  //执行到这一步的时候会打印出：2  
  230.                 .hide(1000, function () { alert(getQueueCount()) }); //执行到这一步的时候会打印出：1  
  231.   
  232.         });  
  233.   
  234.   
  235.      
  236.   
  237.         //---------------------------------动画的停止【stop()】  
  238.   
  239.   
  240.   
  241.         //很多时候需要停止正在运行中的动画，jQuery 为此提供了一个.stop()方法。它有两个可选参数：.stop(clearQueue, gotoEnd)；clearQueue 传递一个布尔值，代表是否清空未执行完的动画列队，gotoEnd 代表是否直接将正在执行的动画跳转到末状态。  
  242.   
  243.         $(".button").click(function () {  
  244.             $("#box")  
  245.                 .animate({left:"1000px"} ,3000)  
  246.         })  
  247.   
  248.         $(".stop").click(function () {  
  249.             $("#box").stop();  //将#box这个元素的动画停止掉。没有参数的stop()方法只是单纯的停止动画  
  250.         })  
  251.    
  252.         //那下面再来了解下，列队动画的停止  
  253.          
  254.         $(".button").click(function () {  
  255.             $("#box").animate({ left: "300px" },1000)  
  256.                      .animate({ bottom: "300px" }, 1000)  
  257.                      .animate({ width: "300px" }, 1000)  
  258.                      .animate({ height: "300px" }, 1000)                                     
  259.         })  
  260.   
  261.         //$(".stop").click(function () {  
  262.         //    $("#box").stop();  // 如果用没有参数的stop()方法去停止有列队动画，那么只会停止掉第一个列队动画，后面的列队动画会继续执行。  
  263.         //})  
  264.   
  265.         //那么现在我想当我点击停止按钮的时候，我就需要整个将列队动画停止下来，而不是仅仅停止第一个，怎么办呢？ 答案是：我们可以给stop()方法加参数  
  266.         //stop()方法有两个可选参数：  
  267.         //第一个可选参数，如果为true，就代表停止并清除掉后面的队列动画。即：动画完全停止（默认值为false）  
  268.         //第二个可选参数，如果为true，就代表停止并清除掉后面的队列动画，并且当前动画会立刻跳转到当前这条动画执行完毕的末尾位置（默认为false）  
  269.         $(".stop").click(function () { $("#box").stop(true, true); })  
  270.   
  271.   
  272.       
  273.   
  274.         //--------------------------------动画的延迟【delay（）】  
  275.   
  276.   
  277.         $(".button").click(function () {  
  278.             $("#box").delay(2000)        //如果delay(2000) 直接写在$("#box")元素后面，就表示延迟2秒再执行动画  
  279.                 .animate({ left: "300px" }, 1000)  
  280.                 .animate({ bottom: "300px" }, 1000)  
  281.                 .animate({ width: "300px" }, 1000).delay(3000) // 写在这里表示等animate({ width: "300px" }, 1000)这段代码执行完后，延迟3秒再执行下面的代码  
  282.                 .animate({ height: "300px" }, 1000)  
  283.         })  
  284.   
  285.   
  286.   
  287.         //-----------------------------------获取当前正在执行的动画 【:animated 过滤器】  
  288.   
  289.   
  290.         $(".button").click(function () {  
  291.             //$("#box").slideUp(1000, function abc() {  
  292.             //    $(this).slideToggle(1000, abc); //无限循环的调用自己。实现动画不停的执行。  
  293.             //})  
  294.             //或者用这以下这种方式也可以实现 动画不停的自执行  
  295.             $("#box").slideToggle(1000, function () {  
  296.                 $(this).slideToggle(1000, arguments.callee); //arguments.callee表示调用自身。 和上面那一句是一样的  
  297.             })  
  298.   
  299.         })  
  300.   
  301.         $(".ani").click(function () {  
  302.             $(":animated").css("background", "blue").stop(true); //获取当前正在执行的动画，并将它的颜色改为蓝色后停止动画的执行  
  303.         })  
  304.   
  305.   
  306.   
  307.         //---------------------动画的全局属性【$.fx.off属性可以关闭页面上所有的动画】【$.fx.interval属性可以调整动画每秒运行的帧数】  
  308.   
  309.         
  310.         //$.fx.interval 属性用于设置jQuery动画每隔多少毫秒绘制一帧图像 (默认为13 毫秒) 数字越小越流畅，但可能影响浏览器性能。  
  311.           
  312.         //$.fx.interval = 100; // 设置动画绘制一帧帧的时间为100毫秒，（默认是13毫秒）  
  313.   
  314.         //$.fx.off = true; //关闭页面上所有的动画  
  315.          
  316.   
  317.   
  318.         //补充：在.animate()方法中，还有一个参数，easing 运动方式，这个参数，大部分参数值需要通过插件来使用，在后面的课程中，会详细讲解。自带的参数有两个：swing(缓动)、linear(匀速)，默认为swing。  
  319.         $('.button').click(function () {  
  320.   
  321.             $('#box').animate({ left: '800px' }, 1000, 'swing'); //swing 表示缓动运行，缓速运动有个特点，就是刚开始运行的慢，到了中间就比较快，最后又慢下来（中间快，两头慢）  整段代码的意思就是在1秒钟内 以缓动方式运行动画  
  322.   
  323.             $('#pox').animate({ left: '800px' }, 1000, 'linear'); //linear表示匀速运行，速度一直不变  整段代码的意思就是在1秒钟内 以匀速方式运行动画  
  324.         });  
  325.     });  
  326. </script>  

感谢原作者分享：http://blog.csdn.net/fanbin168/article/details/45062271
作者：dxh_0829 发表于2015/4/16 15:57:43 原文链接
阅读：4 评论：0 查看评论

相关 [jquery 定义 动画] 推荐：

[转]jquery自定义动画animate()

- - dxh_0829的专栏
在以前很长一段时间里，网页上的各种特效还需要采用flash 在进行. 但最近几年里，我们已经很少看到这种情况了，绝大部分已经使用JavaScript 动画效果来取代flash. 说的取代是网页特效部分，而不是动画. 网页特效比如：渐变菜单、渐进显示、图片轮播等；而动画比如：故事情节广告、MV 等等.

不依赖jQuery也能做好动画

- - SegmentFault 最新的文章
在开发者社区中有种错误的观念——认为在web中，CSS动画是唯一高性能的动画方式. 这使很多开发者放弃基于JavaScript的动画. 所以导致——（1）强制使用大量样式表来完成复杂的UI交互，（2）不能很好地支持IE8、9，（3）放弃只有JS才能完成的完美物理运动效果. 事实证明：基于JavaScript的动画和基于CSS的动画一样快，甚至有时更快.

使用 jQuery Easing Plugin 增强动画过渡效果

- - 我爱水煮鱼
jQuery 提供了一些诸如 show, hide, slideUp, fadeIn 等动画方法，可以方便的切换元素的显隐. 更有强大的自定义动画方法 animate ，可以实现很多动画效果. 为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果. jquery.easing.js 这个 jQuery 插件增加了很多过渡效果，引入之后可以让动画过渡过程更加多样化.

使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效

- - 译言-电脑/网络/数码科技
在线演示1  在线演示2  本地下载. 在过去我们的文章中，我们介绍过很多不错的 时间轴插件，使用这些超棒的插件可以帮助你创建动感漂亮的时间轴展示，其中比较不错的插件如下：. 使用以上jQuery插件或者类库都可以创建漂亮的时间轴timline特效. 由于在我们的 gbtags.com社区开发中，我们需要创建一个简单实用的用户时间轴应用，这里我们选择使用Timelinr来开发，并且为了使得动画过程更加丰富和有趣我们同时使用 Animate.css来创建各种不同的CSS动画特效.

【外刊IT评论网】HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

- - 外刊IT评论网
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是，你不知道将来会不会有其它脚本把你的自定义属性给重置掉，此外，你这样做也会导致html语法上不符合Html规范，以及一些其它副作用. 这就是为什么在HTML5规范里增加了一个 自定义data属性，你可以拿它做很多有用的事情.

当自定义数据属性为 json 格式字符串时 jQuery 的 data api 问题

- - 博客园_首页
jQuery 的 data API 实现方式 有缓存数据的效果. 使用 IE 7 （IE8+ 在控制台切换至IE7 模式），当DOM 节点有自定义数据属性时，检查 DOM 节点即可看到 形如 jQuery18305664906559272507 的属性，这便是 用于从数据存储对象中获取自定义数据的建.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大，虽然一直在用jquery，不用一直都没有深入，这几天重新学习了一下，不得不感叹她的强大，已经让我深深入迷. 这里记录一下，她是怎么快速地操作xml的.. 这里我们有一个xml文件：. jquery如何操作呢,总的思想，就是和操作dom差不多的方法. 首先我们获取这个文件的内容：（我先引入jquery库哈）.

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候，由于使用了单点登录，所以页面会跳转到sso服务器，进行统一登录，. 现在需要在该界面增加令牌的认证，但是SSO服务器和令牌服务器部署在不同的服务器，且暂时没有要合并的可能，所以在SSO登录的时候必须要对令牌进行验证，就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种：. 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.