jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

1、显示动画

  1. 方式一：
  2. $("div").show();
  3. 解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。
  4.  
  5. 方式二：
  6. $('div').show(3000);
  7. 解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。
  8.  
  9. 方式三：
  10. $("div").show("slow");
  11. 参数可以是：
  12.     slow 慢：600ms
  13.     normal 正常：400ms
  14.     fast 快：200ms
  15. 解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。
  16.  
  17. 方式四：
  18. //show(毫秒值，回调函数;
  19. $("div").show(5000,function () {
  20. alert("动画执行完毕！");
  21. });
  22. 解释：动画执行完后，立即执行回调函数。

总结：

上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

2、隐藏动画

  1. $(selector).hide();
  2. $(selector).hide(1000);
  3. $(selector).hide("slow");
  4. $(selector).hide(1000, function(){});

3、实例-（实现点击按钮显示盒子，再点击隐藏盒子）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         #box {
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: green;
  11.             border: 1px solid red;
  12.             display: none;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <div id="box">
  18. </div>
  19. <button id="btn">隐藏</button>
  20. </body>
  21. <script src="../jquery-3.3.1.min.js"></script>
  22.  
  23. <script type="text/javascript">
  24.     //jquery 提供了一些方法 show() hide() 控制元素显示隐藏
  25.     let isShow = true;
  26.     $('#btn').click(function () {
  27.         if (isShow) {
  28.             $('#box').show('slow', function () {
  29.                 $(this).text('盒子出来了');
  30.                 $('#btn').text('显示');
  31.                 isShow = false;
  32.             })
  33.         } else {
  34.             $('#box').hide(2000, function () {
  35.                 $(this).text('');
  36.                 $('#btn').text('隐藏');
  37.                 isShow = true;
  38.  
  39.             })
  40.         }
  41.     })
  42. </script>
  43. </html>

4、开关式显示隐藏动画

  1. //显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。
  2.  
  3. $('#btn').click(function(){
  4.     $('#box').toggle(3000,function(){
  5.         $(this).text('盒子出来了');
  6.         if ($('#btn').text()=='隐藏') {
  7.             $('#btn').text('显示');
  8.         }else{
  9.             $('#btn').text('隐藏');
  10.         }
  11.     });
  12. });

5、滑入和滑出

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 300px;
  9.             height: 300px;
  10.             display: none;
  11.             background-color: green;
  12.         }
  13.     </style>
  14.  
  15.     <script src="../jquery-3.3.1.min.js"></script>
  16.     <script>
  17.         $(function () {
  18.             //点击按钮后产生动画
  19.             $("button:eq(0)").click(function () {
  20.                 //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);
  21.                 $("div").slideDown(2000, function () {
  22.                     alert("动画执行完毕！");
  23.                 });
  24.             });
  25.             //滑出动画
  26.             $("button:eq(1)").click(function () {
  27.                 //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
  28.                 $("div").slideUp(2000, function () {
  29.                     alert("动画执行完毕！");
  30.                 });
  31.             });
  32.             $("button:eq(2)").click(function () {
  33.                 //滑入滑出切换（同样有四种用法）
  34.                 $("div").slideToggle(1000);
  35.             })
  36.  
  37.         })
  38.     </script>
  39. </head>
  40. <body>
  41. <button>滑入</button>
  42. <button>滑出</button>
  43. <button>切换</button>
  44. <div></div>
  45.  
  46. </body>
  47. </html>

6、淡入和淡出

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 300px;
  9.             height: 300px;
  10.             display: none;
  11.             /*透明度*/
  12.             opacity: 0.5;
  13.             background-color: red;
  14.         }
  15.     </style>
  16.  
  17.     <script src="../jquery-3.3.1.min.js"></script>
  18.     <script>
  19.         $(function () {
  20.             //点击按钮后产生动画
  21.             $("button:eq(0)").click(function () {
  22.  
  23. //                //淡入动画用法1:   fadeIn();   不加参数
  24.                 $("div").fadeIn();
  25.  
  26. //                //淡入动画用法2:   fadeIn(2000);   毫秒值
  27. //                $("div").fadeIn(2000);
  28. //                //通过控制  透明度和display
  29.  
  30.                 //淡入动画用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
  31. //                $("div").fadeIn("slow");
  32. //                $("div").fadeIn("fast");
  33. //                $("div").fadeIn("normal");
  34.  
  35.                 //淡入动画用法4:   fadeIn(毫秒值，回调函数[显示完毕执行什么]);
  36. //                $("div").fadeIn(5000,function () {
  37. //                    alert("动画执行完毕！");
  38. //                });
  39.             });
  40.  
  41.             //滑出动画
  42.             $("button:eq(1)").click(function () {
  43. //                //滑出动画用法1:   fadeOut();   不加参数
  44.                 $("div").fadeOut();
  45.  
  46. //                //滑出动画用法2:   fadeOut(2000);   毫秒值
  47. //                $("div").fadeOut(2000);  //通过这个方法实现的：display: none;
  48. //                //通过控制  透明度和display
  49.  
  50.                 //滑出动画用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
  51. //                $("div").fadeOut("slow");
  52. //                $("div").fadeOut("fast");
  53. //                $("div").fadeOut("normal");
  54.  
  55.                 //滑出动画用法1:   fadeOut(毫秒值，回调函数[显示完毕执行什么]);
  56. //                $("div").fadeOut(2000,function () {
  57. //                    alert("动画执行完毕！");
  58. //                });
  59.             });
  60.  
  61.             $("button:eq(2)").click(function () {
  62.                 //滑入滑出切换
  63.                 //同样有四种用法
  64.                 $("div").fadeToggle(1000);
  65.             });
  66.  
  67.             $("button:eq(3)").click(function () {
  68.                 //改透明度
  69.                 //同样有四种用法
  70.                 $("div").fadeTo(1000, 0.5, function () {
  71.                     alert(1);
  72.                 });
  73.             })
  74.         })
  75.     </script>
  76. </head>
  77. <body>
  78. <button>淡入</button>
  79. <button>淡出</button>
  80. <button>切换</button>
  81. <button>改透明度为0.5</button>
  82. <div></div>
  83.  
  84. </body>
  85. </html>

7、自定义动画

语法：

  1.  $(selector).animate({params}, speed, callback);

作用：执行一组CSS属性的自定义动画。

  • 第一个参数表示：要执行动画的CSS属性（必选）

  • 第二个参数表示：执行动画时长（可选）

  • 第三个参数表示：动画执行完后，立即执行的回调函数（可选）

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             position: absolute;
  9.             left: 20px;
  10.             top: 30px;
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: green;
  14.         }
  15.     </style>
  16.     <script src="../jquery-3.3.1.min.js"></script>
  17.     <script>
  18.         jQuery(function () {
  19.             $("button").click(function () {
  20.                 let json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
  21.                 let json2 = {
  22.                     "width": 100,
  23.                     "height": 100,
  24.                     "left": 100,
  25.                     "top": 100,
  26.                     "border-radius": 100,
  27.                     "background-color": "red"
  28.                 };
  29.  
  30.                 //自定义动画
  31.                 $("div").animate(json, 1000, function () {
  32.                     $("div").animate(json2, 1000, function () {
  33.                         alert("动画执行完毕！");
  34.                     });
  35.                 });
  36.  
  37.             })
  38.         })
  39.     </script>
  40. </head>
  41. <body>
  42. <button>自定义动画</button>
  43. <div></div>
  44. </body>
  45. </html>

8、停止动画

  1. $(selector).stop(true, false);

里面的两个参数，有不同的含义。

第一个参数：

  • true：后续动画不执行。

  • false：后续动画会执行。

第二个参数：

  • true：立即执行完成当前动画。

  • false：立即停止当前动画。

PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。

案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.  
  12.         ul {
  13.             list-style: none;
  14.         }
  15.  
  16.         .wrap {
  17.             width: 330px;
  18.             height: 30px;
  19.             margin: 100px auto 0;
  20.             padding-left: 10px;
  21.             background-color: pink;
  22.         }
  23.  
  24.         .wrap li {
  25.             background-color: green;
  26.         }
  27.  
  28.         .wrap > ul > li {
  29.             float: left;
  30.             margin-right: 10px;
  31.             position: relative;
  32.         }
  33.  
  34.         .wrap a {
  35.             display: block;
  36.             height: 30px;
  37.             width: 100px;
  38.             text-decoration: none;
  39.             color: #000;
  40.             line-height: 30px;
  41.             text-align: center;
  42.         }
  43.  
  44.         .wrap li ul {
  45.             position: absolute;
  46.             top: 30px;
  47.             display: none;
  48.         }
  49.     </style>
  50.     <script src="../jquery-3.3.1.min.js"></script>
  51.     <script>
  52.         //入口函数
  53.         $(document).ready(function () {
  54.             //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
  55.             let jqli = $(".wrap>ul>li");
  56.  
  57.             //绑定事件
  58.             jqli.mouseenter(function () {
  59.                 $(this).children("ul").stop().slideDown(1000);
  60.             });
  61.  
  62.             //绑定事件(移开隐藏)
  63.             jqli.mouseleave(function () {
  64.                 $(this).children("ul").stop().slideUp(1000);
  65.             });
  66.         });
  67.     </script>
  68.  
  69. </head>
  70. <body>
  71. <div class="wrap">
  72.     <ul>
  73.         <li>
  74.             <a href="javascript:void(0);">一级菜单1</a>
  75.             <ul>
  76.                 <li><a href="javascript:void(0);">二级菜单2</a></li>
  77.                 <li><a href="javascript:void(0);">二级菜单3</a></li>
  78.                 <li><a href="javascript:void(0);">二级菜单4</a></li>
  79.             </ul>
  80.         </li>
  81.         <li>
  82.             <a href="javascript:void(0);">二级菜单1</a>
  83.             <ul>
  84.                 <li><a href="javascript:void(0);">二级菜单2</a></li>
  85.                 <li><a href="javascript:void(0);">二级菜单3</a></li>
  86.                 <li><a href="javascript:void(0);">二级菜单4</a></li>
  87.             </ul>
  88.         </li>
  89.         <li>
  90.             <a href="javascript:void(0);">三级菜单1</a>
  91.             <ul>
  92.                 <li><a href="javascript:void(0);">三级菜单2</a></li>
  93.                 <li><a href="javascript:void(0);">三级菜单3</a></li>
  94.                 <li><a href="javascript:void(0);">三级菜单4</a></li>
  95.             </ul>
  96.         </li>
  97.     </ul>
  98. </div>
  99. </body>
  100. </html>

ps：javascript:void(0); //跟javascript:;效果一样

上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。

jQuery系列（三）：jQuery动画效果的更多相关文章

  1. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  2. Jquery绑定事件及动画效果

    Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...

  3. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  4. jquery 最简单的动画效果

    <p style="border: 1px solid red"> 我会慢慢变大 </p> <a>dianji</a> <sc ...

  5. jQuery中的渐变动画效果

    jQuery中的渐变动画效果jQuery中的渐变动画效果

  6. 强大的JQuery（二）--动画效果

    上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...

  7. 关于JQuery（最后一点动画效果*）

    1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...

  8. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  9. jQuery入门基础（动画效果）

    一.隐藏显示 1.show()--显示隐藏的被选择元素 例:$(selector).show(speed,callback); 2.hide()--隐藏被选元素的内容 例:$(selector).hi ...

  10. jquery实现锚点动画效果

    锚点相信大家都使用过吧!点击后僵硬的切换是不是很不爽呢? 下面分享一个小技巧,根据锚点offset值来实现动画切换 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

随机推荐

  1. ggpubr进行“paper”组图合并，也许比PS，AI更简单

    本文转载自微信公众号 “生信补给站”,https://mp.weixin.qq.com/s/41iKTulTwGcY-dHtqqSnLA 多个图形进行组图展示,可以既展示一个“事情”的多个角度,也可以 ...

  2. ffmpeg源码分析之媒体打开过程

    int avformat_open_input(AVFormatContext **ps,           const char *filename,           AVInputForma ...

  3. Zookeeper 入门详解

    zookeeper zookeeper是什么 Apache ZooKeeper是Apache软件基金会的一个软件项目,他为大型分布式计算提供开源的分布式配置服务.同步服务和命名注册.ZooKeeper ...

  4. 系统性能分析-vmstat命令详解

    最近温馨巩固Linux 操作系统的 vmstat命令,这个命令所能打印的系统信息满多的,比较好用,就顺当记录下重要的点,方便以后排查系统问题时拿出来用 字段 含义 procs 进程信息字段: -r:正 ...

  5. 7.JSP技术

    JSP和Servlet一样,都是用于开发动态web资源的技术 JSP的两个特性:1.写JSP代码就像是在写HTML代码,但JSP技术允许在页面中编写java代码(理解为一种特殊的HTML) 2.JSP ...

  6. shell菜单选择

    我们会遇到很多进入后台系统的时候,会根据选择,进入不同的系统,下面是一个简单的例子: #!/bin/sh function menu (){ cat << EOF------------- ...

  7. Jupyter安装和环境配置

    配置: 1. 命令行启动 jupyter notebook 2. 也可以Anaconda直接启动 3. 设置token,如下图所示,命令行中输入 jupyter notebook list C:\Us ...

  8. web开发：Bootstrap

    一.ajax请求 二.前台服务器概念 三.bs导读 四.bs引入 五.bs容器与响应式 一.ajax请求 - 后台 ```python# 通过flask框架搭建后台from flask import ...

  9. Hadoop_32_HDFS高可用机制

    1.高可靠概念 HA(High Available):高可用性集群,是保证业务连续性的有效解决方案,一般有两个或两个以上的节点,且分为活动 节点及备用节点 2.Hadoop的HA运作机制: :正式引入 ...

  10. 快速排序详解(lomuto划分快排,hoare划分快排,classic经典快排,dualpivot双轴快排源码)

    目录 快速排序(lomuto划分快排,hoare划分快排,classic经典快排,dualpivot双轴快排) 一.快速排序思想 二.划分思想 三.测试用例 快速排序(lomuto划分快排,hoare ...