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. Open Images V4 下载自己需要的类别

    OpenImages V4数据集描述1)这个v4数据集主要有两种用途:对象检测及分类,意思是说可以用这个数据集训练出对象检测模型,用于识别图像中的对象类别及位置边框.视觉关系检测,比如你用这个v4数据 ...

  2. 一次修改数据库物理文件造成Mysql宕机的恢复记录

    事件起始 某夜,我正在床上冥想准备入睡,忽然同事向我求救:消息内容如下: Oh My Gold 改了些配置,啥都没了!都没了!没了!了! 我仔细询问,原来是她因为某些原因将某库的物理文件夹改名后,发现 ...

  3. Import This - The Zen of Python

    The Zen of Python -- by Tim Peters Beautiful is better than ugly.Explicit is better than implicit.Si ...

  4. 持续化运维 DevOps

            DevOps(Development和Operations的组合词)是一组过程.方法与系统的统称,用于促进开发(应用程序/软件工程).技术运营和质量保障(QA)部门之间的沟通.协作与整 ...

  5. 为什么Linux 实例执行 df 和 du 查看磁盘时结果不一致

    问题现象 执行 df -h 查看 ECS Linux 实例文件系统使用率,可以看到 /dev/xvdb1 磁盘占用了约27G,挂载目录为 /opt . 进入到 /opt 目录执行 du -sh ,显示 ...

  6. 杭电-------2045不容易系列之(3)—— LELE的RPG难题（C语言写）

    /* 当最后一个块可以和第一个块染相同颜色时,答案为:3*pow(2,n-1);但是最后一块不能和第一块颜色相同,则减去和第一 块颜色相同的染色种数即可 3*pow(2,n-1)-ranse(n-1) ...

  7. FakeLogonScreen抓取Windows凭证

    FakeLogonScreen抓取Windows凭证 实践中使用的配置 攻击者: 操作系统: Kali Linux 2020.1 IP: 192.168.1.13 目标: 作业系统: Windows ...

  8. TFT液晶显示屏之绘图板应用

    应用范例: 使用 TOPWAY Smart LCD (HMT043FC-1C) 绘图板应用 第一步建立工程 ① 开TOPWAY TML Graphic Editor 2017 V1.04软件, 点击菜 ...

  9. linux的分区和文件系统

    一.分区类型 主分区 总共最多能分四个 扩展分区 只能有一个,也算做主分区的一种,也就是说主分区加扩展分区最多有4个. 但是扩展分区不能存储数据和格式化,必须在划分成逻辑分区才能使用. 逻辑分区 逻辑 ...

  10. fancybox图片灯箱功能

    fancybox图片灯箱功能 在页面中引入几个文件 <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery ...