[转]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 、类级别的插件开发.