• jQuery常用API--效果

    jQuery给我们封装了很多动画效果，最为常见的如下：

    1. 显示隐藏效果

    1.1 显示语法规范

    show([speed , [easing] , [fn]])

    1.2 显示参数

    ① 参数都可以省略，无动画直接显示
    ② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    ③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
    ④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

    1.3 隐藏语法规范

    hide([speed , [easing] , [fn]])

    1.4 隐藏参数

    ① 参数都可以省略，无动画直接显示
    ② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    ③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
    ④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。 

    1.5 切换语法规范

    toggle([speed , [easing] , [fn]])

    1.6 切换参数

    ① 参数都可以省略，无动画直接显示
    ② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    ③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
    ④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。 

    1.7 代码体验

    1. <!-- 导入 jQuery 文件 -->
    2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    3. <!-- css样式 -->
    4. <style>
    5.     div {
    6.         width: 200px;
    7.         height: 200px;
    8.         background-color: pink;
    9.     }
    10. </style>
    11. <body>
    12.     <!-- HTML结构 -->
    13.     <button class="show">显示</button>
    14.     <button class="hide">隐藏</button>
    15.     <button class="toggle">切换</button>
    16.     <div></div>
    17.     <!-- js代码 -->
    18.     <script>
    19.         $(function() {
    20.             // 1. 点击显示按钮 div显示
    21.             $(".show").click(function() {
    22.                 // $('div').show();  // 直接显示
    23.                 // $('div').show(1000) // 花费1000毫秒显示
    24.                 $('div').show('normal') // 可以使用slow，fast，normal字符串
    25.             });
    26.             // 2. 点击隐藏按钮 div隐藏
    27.             $(".hide").click(function() {
    28.                 // $('div').hide();
    29.                 // $('div').hide(1000) // 花费1000毫秒隐藏
    30.                 $('div').hide('normal', function() {   // 可以使用slow，fast，normal字符串
    31.                         alert("我溜啦~")
    32.                     }); // 在执行完该隐藏效果后，调用该函数
    33.             });
    34.             // 3. 切换切换按钮 div显示/隐藏
    35.             $(".toggle").click(function() {
    36.                 // $('div').toggle();
    37.                 // $('div').toggle(1000) // 花费1000毫秒进行切换动作
    38.                 $('div').toggle('normal') // 可以使用slow，fast，normal字符串
    39.             });
    40.         })
    41.     </script>
    42. </body>

    注意：

    ① 使用jQuery 前，首先要使用<script>标签将 jquery 的js文件导入才可；

    ② 这里的显示和隐藏方法，我们使用的时候一般不加任何参数，直接显示和隐藏，相当于原生JS中 display：block/none；

    2. 滑动效果

    2.1 下滑效果语法规范

    slideDown([speed , [easing] , [fn]])

    2.2 下滑效果参数

    ① 参数都可以省略。
    ② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    ③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
    ④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。 

    2.3 上滑效果语法规范

    slideUp([speed , [easing] , [fn]])

    2.4 上滑效果参数

    ① 参数都可以省略。
    ② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    ③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
    ④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。 

    2.5 滑动切换效果语法规范

    slideToggle([speed , [easing] , [fn]])

    2.6 滑动切换效果参数

    ① 参数都可以省略。
    ② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    ③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
    ④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。 

    2.7 代码体验

    1. <!-- 引入 jQuery 文件 -->
    2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    3. <!-- css样式 -->
    4. <style>
    5.     div {
    6.         width: 140px;
    7.         height: 338px;
    8.         background-color: pink;
    9.     }
    10. </style>
    11. <body>
    12.     <!-- HTML结构 -->
    13.     <button>下拉滑动</button>
    14.     <button>上拉滑动</button>
    15.     <button>切换滑动</button>
    16.     <div></div>
    17.     <!-- js 代码 -->
    18.     <script>
    19.         $(function() {
    20.             // 滑动参数和显示隐藏一样
    21.             $('button').eq(0).click(function('slow') {
    22.                 $('div').slideDown();  // 下滑动 slideDown
    23.             })
    24.             $('button').eq(1).click(function() {   // 上滑动 slideUp
    25.                 $('div').slideUp((function() {
    26.                     alert("我是小仙女~");
    27.                 });  // 上滑动效果完成后，执行回调函数
    28.             })
    29.             $('button').eq(2).click(function() {
    30.                 $('div').slideToggle(500);  // 切换滑动 slideToggle
    31.             })
    32.         })
    33.     </script>
    34. </body>

     注意：滑动效果的参数和显示隐藏一模一样，所以记住其一即可，该效果经常使用于鼠标经过离开出现二级菜单，这比直接显示和隐藏感觉更好。

    3. 淡入淡出效果

    3.1 淡入效果语法规范

    fadeIn([speed , [easing] , [fn]])

    3.2 淡入效果参数

    ① 参数都可以省略。
    ② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    ③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
    ④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。 

    3.3 淡出效果语法规范

    fadeOut([speed , [easing] , [fn]])

    3.4 淡出效果参数

    ① 参数都可以省略。
    ② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    ③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
    ④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。 

    3.5 淡入淡出切换效果语法规范

    fadeToggle([speed , [easing] , [fn]])

    3.6 淡入淡出切换效果参数

    ① 参数都可以省略。
    ② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    ③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
    ④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。 

    3.7 渐进方式调整到指定的不透明度效果语法规范

    fadeTo([[speed] , opacity , [easing] , [fn]])

    3.8 效果参数

    ① opacity 透明度必须写，取值0-1之间。
    ② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)，必须写。
    ③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
    ④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。 

    3.9 代码体验

    1. <!-- 导入 jQuery 文件 -->
    2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    3. <!-- css样式 -->
    4. <style>
    5.     div {
    6.         display: none;
    7.         width: 200px;
    8.         height: 200px;
    9.         background-color: pink;
    10.     }
    11. </style>
    12. <body>
    13.     <!-- HTML结构 -->
    14.     <button>淡入效果</button>
    15.     <button>淡出效果</button>
    16.     <button>淡入淡出切换</button>
    17.     <button>修改透明度</button>
    18.     <div></div>
    19.     <!-- js 代码 -->
    20.     <script>
    21.         $(function() {
    22.             $('button').eq(0).click(function() {
    23.                 $('div').fadeIn(1000); // 淡入效果  fadeIn()
    24.             })
    25.             $('button').eq(1).click(function() {
    26.                 $('div').fadeOut('fast'); // 淡出效果  fadeOut()
    27.             })
    28.             $('button').eq(2).click(function() { // 淡入淡出切换效果  fadeToggle()
    29.                 $('div').fadeToggle(function() {
    30.                     alert("点下淡入，点下又淡出，两种效果来回切换")
    31.                 }); // 淡入淡出切换效果完成后执行回调函数
    32.             })
    33.             $('button').eq(3).click(function() {
    34.                 // 修改透明度 fadeTo()  这个速度和透明度必须写
    35.                 $('div').fadeTo(1000, 0.5);
    36.             })
    37.         })
    38.     </script>
    39. </body>

    注意：除了修改透明度 fadeTo()  这个速度和透明度必须写，其余三种动画效果的参数和显示隐藏还有滑动效果的参数一致，并且都可省略。

    4. 自定义动画 animate

    4.1 语法

    animate(params, [speed] , [easing] , [fn])

    4.2 参数 

    ① params: 想要更改的样式属性，以对象的形式传递，必须写，属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法，如 backgroundColor。其余参数均可省略
    ② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)，必须写。
    ③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
    ④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

    4.3 代码体验

    1. <!-- 导入 jQuery 文件 -->
    2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    3. <!-- css样式 -->
    4. <style>
    5.     div {
    6.         position: absolute;
    7.         left: 0;
    8.         top: 50px;
    9.         width: 200px;
    10.         height: 200px;
    11.         background-color: pink;
    12.     }
    13. </style>
    14. <body>
    15.     <!-- HTML结构 -->
    16.     <button>动起来</button>
    17.     <div></div>
    18.     <!-- js 代码 -->
    19.     <script>
    20.         $(function() {
    21.             $('button').click(function() {
    22.                 //  第一个参数必写，而且以对象形式传递
    23.                 $('div').animate({
    24.                     left: 400,
    25.                     top: 300,
    26.                     opacity: 0.5
    27.                 }, 500, function() {
    28.                     alert('说动就动')
    29.                 });
    30.             })
    31.         })
    32.     </script>
    33. </body>

     注意：自定义动画的第一个参数要以对象的形式传入需要修改的样式属性，必写的

    5. 动画队列及其停止队列方法

    5.1 动画或效果队列

    动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。通俗的讲就是会等上一个动画或效果完成后再去执行下一个，直到把触发的所有动画或效果执行完，这往往与我们的本意会背道而驰，所以需要防止该情形的发生，因此，就出现了停止队列方法。

    5.2 停止队列

    语法：stop()

    ① stop() 方法用于停止动画或效果。
    ② 注意：stop() 写到动画或者效果的前面，相当于停止结束上一次的动画，而只要触发当前这次动画或效果即可。

    6. 事件切换

    6.1 语法规范

    语法：hover([over] , out)

    ① over: 表示鼠标移到元素上要触发的函数（相当于 mouseenter )
    ② out: 表示鼠标移出元素时要触发的函数 ( 相当于 mouseleave )

    6.2 代码体验--案例--下拉菜单

    1. <!-- 导入 jQuery 文件 -->
    2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    3. <!-- css样式 -->
    4. <style>
    5.     * {
    6.         margin: 0;
    7.         padding: 0;
    8.         list-style: none;
    9.         box-sizing: border-box;
    10.     }
    11.     a {
    12.         text-decoration: none;
    13.         color: #666
    14.     }
    15.     .nav {
    16.         margin: 100px;
    17.     }
    18.     .nav>li {
    19.         float: left;
    20.         width: 90px;
    21.         text-align: center;
    22.         line-height: 50px;
    23.         height: 50px;
    24.         background-color: #ccc;
    25.         margin-right: 10px;
    26.     }
    27.     .nav>li>ul {
    28.         display: none;
    29.     }
    30.     .nav>li>ul>li {
    31.         width: 90px;
    32.         height: 45px;
    33.         line-height: 45px;
    34.         background-color: peachpuff;
    35.         border: 1px solid palegoldenrod;
    36.     }
    37. </style>
    38. <body>
    39.     <!-- HTML结构 -->
    40.     <ul class="nav">
    41.         <li>
    42.             <a href="#">微博</a>
    43.             <ul>
    44.                 <li><a href="#">私信</a></li>
    45.                 <li><a href="#">评论</a></li>
    46.                 <li><a href="#">@我</a></li>
    47.             </ul>
    48.         </li>
    49.         <li>
    50.             <a href="#">微博</a>
    51.             <ul>
    52.                 <li><a href="#">私信</a></li>
    53.                 <li><a href="#">评论</a></li>
    54.                 <li><a href="#">@我</a></li>
    55.             </ul>
    56.         </li>
    57.         <li>
    58.             <a href="#">微博</a>
    59.             <ul>
    60.                 <li><a href="#">私信</a></li>
    61.                 <li><a href="#">评论</a></li>
    62.                 <li><a href="#">@我</a></li>
    63.             </ul>
    64.         </li>
    65.         <li>
    66.             <a href="#">微博</a>
    67.             <ul>
    68.                 <li><a href="#">私信</a></li>
    69.                 <li><a href="#">评论</a></li>
    70.                 <li><a href="#">@我</a></li>
    71.             </ul>
    72.         </li>
    73.     </ul>
    74.     <script>
    75.         $(function() {
    76.             // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
    77.             // 第一个参数表示鼠标经过，第二个表示鼠标离开
    78.             /* $('.nav>li').hover(function() {
    79.                 $(this).children('ul').slideDown(300);
    80.             }, function() {
    81.                 $(this).children('ul').slideUp(300);
    82.             }) */
    83.  
    84.             // 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
    85.             $('.nav>li').hover(function() {
    86.             // stop() 方法必须写到动画的前面，这里的动画是slideToggle()，所以写在它前面
    87.                 $(this).children('ul').stop().slideToggle(300);
    88.             });
    89.         })
    90.     </script>
    91. </body>

    注意：

    ① 事件切换 hover 中，第一个参数可以省略，如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数。

    ② 由于该案例鼠标经过向下滑出二级菜单，鼠标离开向上滑入二级菜单，而滑动效果还有一个滑动切换，所以事件切换 hover 可以结合使用slideToggle() ，使用一个函数就可以实现效果，达成代码的最简。同时在效果前加上stop() 方法，可以阻止出现动画错乱。

    7. 案例--高亮显示图片

    需求：鼠标移入哪张图片，就突出该图片，即高亮显示 

    1. <!-- 导入 jQuery 文件 -->
    2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    3. <!-- css样式 -->
    4. <style>
    5.     * {
    6.         margin: 0;
    7.         padding: 0;
    8.         box-sizing: border-box;
    9.     }
    10.     body {
    11.         background: #000;
    12.     }
    13.     .clear::after {
    14.         content: "";
    15.         display: block;
    16.         clear: both;
    17.     }
    18.     .box {
    19.         margin: 100px auto;
    20.         width: 642px;
    21.         border: 1px solid #ccc;
    22.         padding-left: 10px;
    23.         padding-bottom: 10px;
    24.     }
    25.     .box ul li {
    26.         list-style: none;
    27.         float: left;
    28.         margin: 10px 10px 0 0;
    29.     }
    30. </style>
    31. <body>
    32.     <!-- HTML结构 -->
    33.     <div class="box">
    34.         <ul class="clear">
    35.             <li><img src="images/01.jpg" alt=""></li>
    36.             <li><img src="images/02.jpg" alt=""></li>
    37.             <li><img src="images/03.jpg" alt=""></li>
    38.             <li><img src="images/04.jpg" alt=""></li>
    39.             <li><img src="images/05.jpg" alt=""></li>
    40.             <li><img src="images/06.jpg" alt=""></li>
    41.         </ul>
    42.     </div>
    43.     <!-- js 代码 -->
    44.     <script>
    45.         $(function() {
    46.             $('.box li').hover(function() {
    47.                 // 当鼠标移入时，其他的li标签透明度：0.5
    48.                 $(this).siblings('li').stop().fadeTo(500, .5);
    49.                 // 鼠标离开，其他li 透明度改为1
    50.             }, function() {
    51.                 $(this).siblings('li').stop().fadeTo(500, 1)
    52.             })
    53.         })
    54.     </script>
    55. </body>

     

    案例分析：

    ① 所谓的高亮显示，其实是通过修改透明度实现的，鼠标移入的图片透明度不变，而是改变它的兄弟图片的透明度为0.5，它们变暗了，自然当前图片就显得高亮了；

    ② 鼠标移出，让其兄弟透明度更改回1，这样当前图片自然不突出了，变为普通样式。

    jQuery 给我们封装的这些动画效果，非常简洁好用，而且使用方式几乎一样，所以只要记住一种就可以类比使用其他效果，但要注意特殊效果fadeTo()。 

  • 相关阅读:
    简述 HTML 的语义化标签是什么？
    ovirt-engine通过UI Plugin自定义页面
    计算机的错误计算（五十七）
    ECharts数据可视化项目【11】
    2023北京联合大学考研介绍
    【毕业设计】树莓派智能捡垃圾机器人 - 机器视觉 单片机 物联网
    taro 兼容支付宝小程序和微信小程序＜四＞ -- 腾讯地图和高德地图api
    煤炭行业数智化供应商管理系统解决方案：数据驱动，供应商智慧平台助力企业降本增效
    天龙八部科举答题问题和答案（全7/8）
    Java枚举类 （详细解析java中的枚举类深入浅出）
  • 原文地址：https://blog.csdn.net/JJ_Smilewang/article/details/125546073