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. EMC networker nmm can restore and recover sqlserver as different name to different location

    EMC networker nmm can restore and recover sqlserver as different name to different location That is ...

  2. MySQL复制(四)—多源(主)复制

    (一)多主复制概述 MySQL从5.7版本开启支持多主复制,所谓多主复制,是将多个主库的数据复制到一个从库中.通常用于数据仓库整合数据,比如OLTP系统为了分散业务压力,对数据库进行分库分表,当要对数 ...

  3. 第3章 JDK并发包（一）

    3.1 多线程的团队协作:同步控制 3.1.1 synchronized的功能扩展:重入锁 重入锁可以完全替代synchronized关键字. 重入锁使用java.util.concurrent.lo ...

  4. 《Head first设计模式》之工厂模式

    工厂方法模式定义了一个创建对象的接口,但由子类决定要实例化的类是哪一个.工厂方法让类把实例化推迟到了子类. 预定披萨 假设你有一个披萨店,预定披萨的代码可能是这么写的: Pizza orderPizz ...

  5. 10-SpringMVC04

    FreeMarker 1.入门案例 1. 导包:freemarker.jar 2. 需要创建模板文件的路径:src/main/resources/template 3. 创建一个模板对象:hello. ...

  6. css权重导致的样式不生效问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. The finally block does not always execute in try finally

    A finally block does not always xecute. The code in the try block could go into an infinite loop, th ...

  8. C#设置自定义文件图标实现双击启动

    修改注册表,双击文件直接打开 string strProject = "Exec"; string p_FileTypeName =".cdb";//文件后缀 ...

  9. TChart-图表的滚动与翻译

    界面代码: object Form1: TForm1 Left = Top = Width = Height = Caption = 'Form1' Color = clBtnFace Font.Ch ...

  10. [红日安全]Web安全Day2 - XSS跨站实战攻防

    本文由红日安全成员: Aixic 编写,如有不当,还望斧正. 大家好,我们是红日安全-Web安全攻防小组.此项目是关于Web安全的系列文章分享,还包含一个HTB靶场供大家练习,我们给这个项目起了一个名 ...