HTML5学堂-码匠 HTML5学堂

您当前位于:jQuery与类库搭建 ——> jQuery animate动画精讲

jQuery animate动画精讲

2015/07/10 08:46:00 | 作者:HTML5学堂(码匠) | 分类:jQuery与类库搭建 | 关键词:jQuery,animate,动画

jQuery animate动画精讲

HTML5学堂:animate是jQuery中很好用的一个方法,用于实现自定义动画。对于animate方法是有不同的书写方法的,今天我们就来说说animate平时不太常用的一些用法。

如何支持“背景颜色”

animate方法,能够支持单位为数值(px、em、%)的CSS属性,对于背景颜色的变化,animate是不支持的。但是我们有时也希望颜色能够发生变化,此时,我们可以使用一个jQuery插件——jQuery.Color()。点击此处可下载——jQuery.Color插件(访问密码:236d)

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - jQuery animate</title>
  6.     <link rel="stylesheet" href="model/css/reset.css">
  7.     <script src="model/js/jquery-1.11.2.js"></script>
  8.     <script src="model/js/jquery.color.js"></script>
  9.     <style>
  10.         .btn {
  11.             height: 50px;
  12.             line-height: 50px;
  13.             font-size: 32px;
  14.         }
  15.         .wrap {
  16.             width: 400px;
  17.             height: 50px;
  18.             background: #39f;
  19.             color: #fff;
  20.             font-size: 32px;
  21.             font-weight: bold;
  22.             text-align: center;
  23.             line-height: 50px;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="btn">点击此处</div>
  29.     <div class="wrap">HTML5学堂</div>
  30.     <script>
  31.         $(".btn").click(function(){
  32.             $(".wrap").animate({
  33.                 "background-color" : "#999"
  34.             }, 1000)
  35.         });
  36.     </script>
  37. </body>
  38. </html>

animate动画中的变量应用

jQuery的动画属性animate,除了能够设置基本的数值之外,还可以设置相对的值。如果一个值提供了一个+=和 -=操作符号,那么目标值 = 当前的值 + 或 - 给定的值。

代码示例:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - jQuery animate</title>
  6.     <link rel="stylesheet" href="model/css/reset.css">
  7.     <script src="model/js/jquery-1.11.2.js"></script>
  8.     <style>
  9.         .btn {
  10.             height: 50px;
  11.             line-height: 50px;
  12.             font-size: 32px;
  13.         }
  14.         .wrap {
  15.             width: 400px;
  16.             height: 50px;
  17.             background: #39f;
  18.             color: #fff;
  19.             font-size: 32px;
  20.             font-weight: bold;
  21.             text-align: center;
  22.             line-height: 50px;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="btn">点击此处</div>
  28.     <div class="wrap">HTML5学堂</div>
  29.     <script>
  30.         $(".btn").click(function(){
  31.             $(".wrap").animate({
  32.                 "width" : "+=100px"
  33.             }, 1000)
  34.         });
  35.     </script>
  36. </body>
  37. </html>

animate动画中的特殊属性值

jQuery的animate方法当中,对于属性的属性值设置,除了使用数值之外,还可以考虑“show”、“hide”、“toggle”。个人认为,这三种方法的优势在于,对于需要隐藏或显示此类的特效,能够具备较好的扩展性。换句话说,对于一个元素,如果初始状态是宽度400像素,希望能够点击之后宽度变化为0,再点击某处宽度恢复。我们可以使用animate({"width" : "0px"});和animate({"width" : "400px"});来处理。但是,如果此时当前元素的初始宽度并不是400,而是600像素,那么上面这段代码就变得没有“扩展性”了。虽然我们的确可以使用变量替换掉常量,再使用.css()方法获取当前元素的样式,但是也可以通过上面提到的“toggle”等特殊属性值进行控制。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - jQuery animate</title>
  6.     <link rel="stylesheet" href="model/css/reset.css">
  7.     <script src="model/js/jquery-1.11.2.js"></script>
  8.     <style>
  9.         .btn {
  10.             height: 50px;
  11.             line-height: 50px;
  12.             font-size: 32px;
  13.         }
  14.         .wrap {
  15.             width: 400px;
  16.             height: 50px;
  17.             background: #39f;
  18.             color: #fff;
  19.             font-size: 32px;
  20.             font-weight: bold;
  21.             text-align: center;
  22.             line-height: 50px;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="btn">点击此处</div>
  28.     <div class="wrap">HTML5学堂</div>
  29.     <script>
  30.         $(".btn").click(function(){
  31.             $(".wrap").animate({
  32.                 "width" : "toggle"
  33.             }, 1000)
  34.         });
  35.     </script>
  36. </body>
  37. </html>

链式动画

我们能够使用animate实现多个动画,但是如何让一个一个的动画有顺序的执行呢?此处会使用到queue这个属性设置。queue表示是否在效果队列中放置动画(即,是否形成一个链式动画)。如果queue的值为false,则动画立即开始,如果为queue的值设置为true,则表示是链式动画。默认为true(链式)。

个人认为,并没有太大的必要,因为默认的就是链式动画,如果希望同时变化,完全可以写在一个animate当中。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端