jQuery最吸引人的地方莫过于能做出绚丽的动画了，也是能极大提高用户体验的地方，这次我们就来一探jQuery中的动画！

一. show()方法和hide()方法

show()方法与hide()方法是jQuery中最基本的动画方法，hide()方法设置是将所匹配的元素的样式display甚至为none。使用方法也很简单。

  1. $("element").show();                                     //将元素element显示
    2. 

  2. $("element").hide();                                     //将元素element隐藏
    3. 

  3. $("element").css("display","none");                      //将元素element隐藏,hide()方法效果一致。
如果仅仅是这样，那么丝毫体现不出jQuery中的强大，动画至少要让元素感觉是动起来的感觉！那么这种效果应该怎么做呢，其实很简单，需要在show()与hide()里面添上参数即可，添上的参数代表在多长时间内进行显示，或是多长事件内进行小时，所需注意的是参数的单位为毫秒，比如说$(“element”).show(3000);在3000毫秒内显示，即3秒种内显示完成。这种方法在显示或者隐藏的时候，内容与透明图都是渐进的显示或隐藏的，所以有一种动画的感觉。

二. fadeIn()方法和fadeOut()方法

fadeIn()、fadeOut()与show()、hide()的差别就在与它们只改变其透明度，简单而言，其效果就是要实现淡进、淡出的效果。该方法的具体使用情况参考上例。

三.slideUp()和slideDown()方法

slideUp()和slideDown()方法与show()、hide()方法的差别就在于其改变的是元素的高度，使元素由上而下的展示，就仿佛拉开上下式的那种窗帘的感觉一样！我们还是来看一个具体的实例。

  1. <script type="text/javascript">
    2. 

  2. 		//toggle()被弃之后的替代方法
    3. 

  3. 		var i=0;
    4. 

  4.         $(function () {
    5. 

  5.             $("h5.head").click(function () {
    6. 

  6. 				if(i==0){
    7. 

  7. 						$(this).next().slideDown(2000);                //在2秒内完成展示
    8. 

  8. 						i=1;
    9. 

  9. 					}else{
    10. 

  10. 					$(this).next().slideUp(2000);              //在2秒内完成收缩
    11. 

  11. 					i=0;
    12. 

  12. 				}                
    13. 

  13.             })
    14. 

  14.         })
    15. 

  15. </script>
    16. 

  16. <div id="panel">
    17. 

  17.     <h5 class="head">怎么样？</h5>
    18. 

  18.     <div class="content">还不错哦。<br />
    19. 

  19.      <p>还好</p>
    20. 

  20.      <p>还行</p>
    21. 

  21.      <p>还可以</p>
    22. 

  22.     </div>
    23. 

  23. </div>

其显示效果就会如图1所示，是逐渐拉开的。

另外我们还可以在参数里面通过具体的数字来设置快慢程度，或者使用”slow”、”normal”、”fast”来控制速度。

四. 自定义动画方法 animate()

事实上，上面介绍的动画远远不能满足于我们的需求，很多时候，我们必须自定义我们的动画，下面就来说说自定义的动画。自定义动画是通过方法animate()方法来实现的。其语法结构为：animate(params,speed,callback);第一个包含央视属性及值的映射。第二个参数speed是表示速度的参数，为可选参数。第三个参数是指在动画完成之后执行的函数，也是可选参数。下面我们以一个具体的例子来说明。我们做一个动画效果。先看HTML代码。

  1. <style type="text/css">
    2. 

  2. #panel
    3. 

  3. {
    4. 

  4.     position:relative;
    5. 

  5.     width:100px;
    6. 

  6.     height:100px;
    7. 

  7.     border:1px solid #0050D0;
    8. 

  8.     background:#111D1F;
    9. 

  9.     cursor:pointer;      
    10. 

  10. }
    11. 

  11. </style>
    12. 

  12. <body>
    13. 

  13.     <div id="panel"></div>
    14. 

  14. </body>

即为一个正方形的div区域，如图2所示。我们的目标就是要是这个正方形区域动起来，使其动起来！其目标效果是：先使其向右移动，然后在向右移动的时候，我们使其高度也同时增加，当向右移动到一定程度的时候，我们再试其向下移动，并使宽度增加，最后移动到目标位置后，在另图形消失！具体jQuery代码如下：

  1. <script type="text/javascript">
    2. 

  2.         $(function () {  //加载DOM
    3. 

  3.             $("#panel").css("opacity", "0.5"); //先设置div区域的不透明度
    4. 

  4.             $("#panel").click(function () {
    5. 

  5.                 $(this).animate({ left: "400px", height: "200px", opacity: "1" }, 3000)   //令<div>区域在3秒内向右移动,移动的过程中使高度调至
    6. 

  6. 为200px
    7. 

  7.                 .animate({ top: "200px", width: "200px" }, 3000)                         //令<div>区域在3秒内向下移动,并使宽度调至为200px
    8. 

  8.                 .fadeOut();   //令其逐渐淡出
    9. 

    10. 

  10.             });
    11. 

  11.         });
    12. 

  12. </script>

你也可以动手试试其效果！

五. toggle().slideToggle(),fadeTo(),fadeToggle()方法

toggle()用来切换元素的可见状态。如果元素可见，则转换为隐藏，如果元素是隐藏的，则切换为隐藏的，如果元素是隐藏的，则切换为可见的。

我们看下述代码。

  1. $("#element").click(function{
    2. 

  2.     $(this).toggle();
    3. 

  3. });

其效果与下述代码是一样的。

  1. $("#element").toggle(function(){
    2. 

  2.     $(this).hide();
    3. 

  3. },function(){
    4. 

  4.     $(this).show();
    5. 

  5. });

换句话说，toggle()就是用于替代hide()，show()的综合效果的，正如jQuery所倡导的那句话：Do more,Write less!

说完了toggle()，我们再来看看slideToggle(),其是通过高度变化来切换匹配元素的可见性。我相信您也一定知道这个方法的出现是用来代替哪两个方法的组合的了？正是slideUp与slideDown。

fadeTo()方法可以把匹配元素的不透明度以渐进的方式调整到指定的值。

哪fadeToggle()呢？一句话你就明白：它的出现是为了代替fadeIn与fadeOut()的组合效果！

六. jQuery中的动画的各个方法总结比较

说了那么多方法，估计大家都迷糊了，下面列个表格进行比较一番，以区分他们的区别。同时，也便于大家在忘了动画中的一些方法时，可以快速查询。见表1。

方法名

说明
show()和hide() 同时修改匹配元素的高度、宽度和不透明度
fadeIn()和fadeOut() 只改变不透明度
slideUp()和slideDown() 只改变高度
fadeTo() 只改变不透明度
toogle() 用来代替show()和hide()，所以能够同时修改匹配元素的高度、宽度和不透明度
slideToggle() 用来代替slideUp()方法和slideDown()方法，只修改高度
fadeToggle() 用来代替fadeIn()方法和fadeOut()方法，只修改不透明度
animate() 自定义方法，具体介绍见第四节，事实上，以上方法都是调用animate()方法

七. 动画示例效果

说了这么多方法，那么具体来一个详细点的Demo示例吧，来好好体会下jQuery给网页带来的变化！我们所有做的效果就是类似于在视频网站上，可以动态滑动的视频或者图片，首先我们绘制好我们的html代码，具体如下:
  1. <div class="v_show">
    2. 

  2.         <div class="v_caption">
    3. 

  3.             <h2 class="cartoon" title="卡通动漫">
    4. 

  4.                 卡通动漫</h2>
    5. 

  5.             <div class="highlight_tip">
    6. 

  6.                 <span class="current">1</span><span>2</span><span>3</span><span>4</span>
    7. 

  7.             </div>
    8. 

  8.             <div class="change_btn">
    9. 

  9.                 <span class="prev">上一页</span> <span class="next">下一页</span>
    10. 

  10.             </div>
    11. 

  11.             <em><a href="#">更多>></a></em>
    12. 

  12.         </div>
    13. 

  13.         <div class="v_content">
    14. 

  14.             <div class="v_content_list">
    15. 

  15.                 <ul>
    16. 

  16.                     <li><a href="#">
    17. 

  17.                         <img src="img/01.jpg" alt="海贼王" /></a><h4>
    18. 

  18.                             <a href="#">海贼王</a></h4>
    19. 

  19.                         <span>播放:<em>28,276</em></span></li>
    20. 

  20.                     <li><a href="#">
    21. 

  21.                         <img src="img/01.jpg" alt="海贼王" /></a><h4>
    22. 

  22.                             <a href="#">海贼王</a></h4>
    23. 

  23.                         <span>播放:<em>28,276</em></span></li>
    24. 

  24.                     <li><a href="#">
    25. 

  25.                         <img src="img/01.jpg" alt="海贼王" /></a><h4>
    26. 

  26.                             <a href="#">海贼王</a></h4>
    27. 

  27.                         <span>播放:<em>28,276</em></span></li>
    28. 

  28.                     <li><a href="#">
    29. 

  29.                         <img src="img/01.jpg" alt="海贼王" /></a><h4>
    30. 

  30.                             <a href="#">海贼王</a></h4>
    31. 

  31.                         <span>播放:<em>28,276</em></span></li>
    32. 

  32.                     <li><a href="#">
    33. 

  33.                         <img src="img/02.jpg" alt="哆啦A梦" /></a><h4>
    34. 

  34.                             <a href="#">哆啦A梦</a></h4>
    35. 

  35.                         <span>播放:<em>33,326</em></span></li>
    36. 

  36.                     <li><a href="#">
    37. 

  37.                         <img src="img/02.jpg" alt="哆啦A梦" /></a><h4>
    38. 

  38.                             <a href="#">哆啦A梦</a></h4>
    39. 

  39.                         <span>播放:<em>33,326</em></span></li>
    40. 

  40.                     <li><a href="#">
    41. 

  41.                         <img src="img/02.jpg" alt="哆啦A梦" /></a><h4>
    42. 

  42.                             <a href="#">哆啦A梦</a></h4>
    43. 

  43.                         <span>播放:<em>33,326</em></span></li>
    44. 

  44.                     <li><a href="#">
    45. 

  45.                         <img src="img/02.jpg" alt="哆啦A梦" /></a><h4>
    46. 

  46.                             <a href="#">哆啦A梦</a></h4>
    47. 

  47.                         <span>播放:<em>33,326</em></span></li>
    48. 

  48.                     <li><a href="#">
    49. 

  49.                         <img src="img/03.jpg" alt="火影忍者" /></a><h4>
    50. 

  50.                             <a href="#">火影忍者</a></h4>
    51. 

  51.                         <span>播放:<em>28,276</em></span></li>
    52. 

  52.                     <li><a href="#">
    53. 

  53.                         <img src="img/03.jpg" alt="火影忍者" /></a><h4>
    54. 

  54.                             <a href="#">火影忍者</a></h4>
    55. 

  55.                         <span>播放:<em>28,276</em></span></li>
    56. 

  56.                     <li><a href="#">
    57. 

  57.                         <img src="img/03.jpg" alt="火影忍者" /></a><h4>
    58. 

  58.                             <a href="#">火影忍者</a></h4>
    59. 

  59.                         <span>播放:<em>28,276</em></span></li>
    60. 

  60.                     <li><a href="#">
    61. 

  61.                         <img src="img/03.jpg" alt="火影忍者" /></a><h4>
    62. 

  62.                             <a href="#">火影忍者</a></h4>
    63. 

  63.                         <span>播放:<em>28,276</em></span></li>
    64. 

  64.                     <li><a href="#">
    65. 

  65.                         <img src="img/04.jpg" alt="龙珠" /></a><h4>
    66. 

  66.                             <a href="#">龙珠</a></h4>
    67. 

  67.                         <span>播放 <em>57,865</em></span></li>
    68. 

  68.                     <li><a href="#">
    69. 

  69.                         <img src="img/04.jpg" alt="龙珠" /></a><h4>
    70. 

  70.                             <a href="#">龙珠</a></h4>
    71. 

  71.                         <span>播放 <em>57,865</em></span></li>
    72. 

  72.                     <li><a href="#">
    73. 

  73.                         <img src="img/04.jpg" alt="龙珠" /></a><h4>
    74. 

  74.                             <a href="#">龙珠</a></h4>
    75. 

  75.                         <span>播放 <em>57,865</em></span></li>
    76. 

  76.                     <li><a href="#">
    77. 

  77.                         <img src="img/04.jpg" alt="龙珠" /></a><h4>
    78. 

  78.                             <a href="#">龙珠</a></h4>
    79. 

  79.                         <span>播放 <em>57,865</em></span></li>
    80. 

  80.                 </ul>
    81. 

  81.             </div>
    82. 

  82.         </div>
    83. 

  83.     </div>

然后为其添加好css样式，最终呈现的效果如图3所示

由于我们重点来说的是jQuery，所以对于css样式以及整个网页提供附件，就不详细说css了。那好，我们的工作就正式开始了，需要为其添加jQuery代码，所达到的效果就是通过点击卡通动漫旁的左右按钮来切换图片。

首先，我们来分析下流程。我们总共是16张图片，因为加css样式的原因所以现在只显示了4张图片，我们暂且把显示出来的四张图片成为一个版面，即海贼王的四张图片，还有四张哆啦A梦，四张火影忍者，四张龙珠的照片需要我们滚动显示，即每按一次图3中红圈圈出来的按钮，图片就会自动切换，比如按向右的按钮就会自动切换到四张哆啦A梦上，总共是16张图片，我们需要滑动4次，也就是说滑动4个版面。

分析到这里，那么大家就应该明白jQuery代码在大体方面包含两个方面，一个是点击向右箭头的click事件，使其版面自动向右滑动，另一个就是点击向左箭头的click事件。我们在这里详细说下点击向右箭头的click事件。在滑动的时候我们实现的动画方法采用的是animate()；通过设置其left属性来控制。

再次，图3中还有一部分需要我们去处理，那就是“卡通动漫”这四个字旁边的小圆点，当前版面的圆点会显示为高亮，也就是会显示为蓝色。那么，也就是指在我们点击箭头的时候，圆点也会同时移动，比如点击右箭头，第二个圆点就会高亮，同时也会去除第一个圆点的高亮效果，这是通过addClass()方法来添加一个“current”样式，已在css代码中写好了。

分析到了这里，那么我们就具体看看代码吧。此处只列出向右的箭头的click代码。

  1. <script type="text/javascript">
    2. 

  2.            var page = 1;                           //当前版面为第一个版面
    3. 

  3.             var i = 4;                              //每版放四个图片
    4. 

  4.             var len = $("ul li").length;            //总的图片数目
    5. 

  5.             var page_Count = Math.ceil(len / i);    //用天花板函数取得总共的版面数
    6. 

  6.             var v_width = $(".v_content").width();  //获取id=v_contend的<div>区域的宽度，次宽度即为下一个版式滑动的宽度
    7. 

  7.             //设置鼠标点击下一页按钮，版面就会自动滑动
    8. 

  8.             $("span.next").click(function () {      //绑定click事件
    9. 

  9.                 if (!$(".v_content_list").is(":animated")) {             //判断当前动画是否正在进行
    10. 

  10.                     if (page == page_Count)        //当前版面为最后一个版面，此时再外下滑，应该滑回第一个版面
    11. 

  11.                     {
    12. 

  12.                         $(".v_content_list").animate({ left: "0px" }, "normal");
    13. 

  13.                         page = 1;
    14. 

  14.                     }
    15. 

  15.                     else {                            //滑动到下一版面
    16. 

  16.                         $(".v_content_list").animate({ left: "-=" + v_width }, "normal");
    17. 

  17.                         page++;
    18. 

  18.                     }
    19. 

  19. //为当前版面的圆点添加"current"样式，并去除其他版面的"current"样式,即完成分析中的第三步
    20. 

  20.                     $("div.highlight_tip").find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");   
    21. 

  21.                 }
    22. 

  22.             });
    23. 

  23. </script>

好了，这个Deomo就分析到这里，具体的代码我打包到附件中，大家可以下载查看。jQuery中最绚丽的部分恐怕就是实现动画效果了，其实，很多复杂的动画也是由简单的动画叠加而成，而且jQuery实现动画的方式很简洁（相对javascript而言)，尤其是很多代码都可以通过链式操作的方式进行书写，比如这个Deomo中我们实现圆点样式的改变就是通过链式操作，jQuery中的动画就写到这里。

实例代码下载

转自：http://www.cnblogs.com/yanfengfree/p/3534399.html 并对文中实例稍作修改

jQuery笔记（四）jQuery中的动画的更多相关文章

  1. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  2. JQuery笔记：JQuery和JavaScript的联系与区别

    来源:http://www.ido321.com/1019.html ps:LZ觉得这个标题有点大了,超出了能力范围,不喜勿碰.目前只记录LZ能力范围内的,日后持续补充. 一.JQuery对象和DOM ...

  3. jQuery笔记之animate中的queue

    队列 队列的执行顺序 queue() dequeue() 输出对象里面的内容 依次出队 不过这样写太麻烦了,因为每次都要输出,所以我们看下面的方法 运用到队列输出的 <!DOCTYPE html ...

  4. Android笔记(六十四) android中的动画——补间动画（tweened animation）

    补间动画就是只需要定义动画开始和结束的位置,动画中间的变化由系统去补齐. 补间动画由一下四种方式: 1.AplhaAnimation——透明度动画效果 2.ScaleAnimation ——缩放动画效 ...

  5. Jquery笔记和ajax笔记

    Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...

  6. jQuery学习笔记（四）jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

  7. 【学习笔记】jQuery中的动画与效果

    1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值: ...

  8. 前端笔记之jQuery（上）加载函数的区别&对象&操作HTML/CSS&动画&选择器

    一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...

  9. （九）jQuery中的动画(载)

    原文链接:http://blog.csdn.net/zfy865628361/article/details/50358367 首先,用jQuery做动画效果要求在标准模式下,否则可能会引起动画抖动. ...

随机推荐

  1. EOJ Monthly 2019.2 E 中位数 (二分+中位数+dag上dp)

    题意: 一张由 n 个点,m 条边构成的有向无环图.每个点有点权 Ai.QQ 小方想知道所有起点为 1 ,终点为 n 的路径中最大的中位数是多少. 一条路径的中位数指的是:一条路径有 n 个点,将这  ...

  2. 研究微信红包分配算法之Golang版

    今天来看一下红包的分配,参考几年前流传的微信红包分配算法,今天用Golang实现一版,并测试验证结果. 微信红包的随机算法是怎样实现的?https://www.zhihu.com/question/2 ...

  3. kendo ui 实现MVVM

    MVVM                    model----view model----model 实现页面和model之间的动态绑定 grid 支持 events  source  visib ...

  4. LeetCode29 Medium 不用除号实现快速除法

    本文始发于个人公众号:TechFlow,原创不易,求个关注 链接 Divide Two Integers 难度 Medium 描述 给定两个整数,被除数和除数,要求在不使用除号的情况下计算出两数的商 ...

  5. LDAP安装

    一.介绍 LDAP 全称:Lightweight Directory Access Protocol,即“轻量级目录访问协议”. LDAP目录以树状的层次结构来存储数据.如果你对自顶向下的DNS树或U ...

  6. axios中get请求的params参数中带数组的处理方法

    axios中get请求的params参数中带数组时导致向后台传参失败报错:from origin 'http://localhost:8080' has been blocked by CORS po ...

  7. Android之ScrollView嵌套ListView冲突 (listView只显示一行)

    在ScrollView中嵌套使用ListView,ListView只会显示一行多一点.两者进行嵌套,即会发生冲突.由于ListView本身都继承于ScrollView,一旦在ScrollView中嵌套 ...

  8. C# 小游戏-拼图魔方【Game Puzzle】

    工作闲暇之余去逛了逛CodeProject,刚好现有项目主要用到就是winform,浏览了下照片,找到上周带着蛋挞打疫苗回家的照片,于是新生一记,如何把这些图片玩起来~ 80后应该都有印象,小时候有种 ...

  9. JavaWeb学习(四) : JSP 基本语法

    引入 JSP 的概念: 通俗来讲 : 在 HTML 代码中混合 Java 代码能让网页具有动态的功能, 而嵌入了 Java 代码的网页就是 JSP. JSP 的特点(优点) : 1.运行于服务端(是一 ...

  10. 「数据挖掘入门系列」Python快速入门

    Python环境搭建 本次入门系列将使用Python作为开发语言.要使用Python语言,我们先来搭建Python开发平台.我们将基于Python 2.7版本.以及Python的开发发行版本Anaco ...