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 代码体验
<!-- 导入 jQuery 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- css样式 --> <style> div { width: 200px; height: 200px; background-color: pink; } </style> <body> <!-- HTML结构 --> <button class="show">显示</button> <button class="hide">隐藏</button> <button class="toggle">切换</button> <div></div> <!-- js代码 --> <script> $(function() { // 1. 点击显示按钮 div显示 $(".show").click(function() { // $('div').show(); // 直接显示 // $('div').show(1000) // 花费1000毫秒显示 $('div').show('normal') // 可以使用slow,fast,normal字符串 }); // 2. 点击隐藏按钮 div隐藏 $(".hide").click(function() { // $('div').hide(); // $('div').hide(1000) // 花费1000毫秒隐藏 $('div').hide('normal', function() { // 可以使用slow,fast,normal字符串 alert("我溜啦~") }); // 在执行完该隐藏效果后,调用该函数 }); // 3. 切换切换按钮 div显示/隐藏 $(".toggle").click(function() { // $('div').toggle(); // $('div').toggle(1000) // 花费1000毫秒进行切换动作 $('div').toggle('normal') // 可以使用slow,fast,normal字符串 }); }) </script> </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 代码体验
<!-- 引入 jQuery 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- css样式 --> <style> div { width: 140px; height: 338px; background-color: pink; } </style> <body> <!-- HTML结构 --> <button>下拉滑动</button> <button>上拉滑动</button> <button>切换滑动</button> <div></div> <!-- js 代码 --> <script> $(function() { // 滑动参数和显示隐藏一样 $('button').eq(0).click(function('slow') { $('div').slideDown(); // 下滑动 slideDown }) $('button').eq(1).click(function() { // 上滑动 slideUp $('div').slideUp((function() { alert("我是小仙女~"); }); // 上滑动效果完成后,执行回调函数 }) $('button').eq(2).click(function() { $('div').slideToggle(500); // 切换滑动 slideToggle }) }) </script> </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 代码体验
<!-- 导入 jQuery 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- css样式 --> <style> div { display: none; width: 200px; height: 200px; background-color: pink; } </style> <body> <!-- HTML结构 --> <button>淡入效果</button> <button>淡出效果</button> <button>淡入淡出切换</button> <button>修改透明度</button> <div></div> <!-- js 代码 --> <script> $(function() { $('button').eq(0).click(function() { $('div').fadeIn(1000); // 淡入效果 fadeIn() }) $('button').eq(1).click(function() { $('div').fadeOut('fast'); // 淡出效果 fadeOut() }) $('button').eq(2).click(function() { // 淡入淡出切换效果 fadeToggle() $('div').fadeToggle(function() { alert("点下淡入,点下又淡出,两种效果来回切换") }); // 淡入淡出切换效果完成后执行回调函数 }) $('button').eq(3).click(function() { // 修改透明度 fadeTo() 这个速度和透明度必须写 $('div').fadeTo(1000, 0.5); }) }) </script> </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 代码体验
<!-- 导入 jQuery 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- css样式 --> <style> div { position: absolute; left: 0; top: 50px; width: 200px; height: 200px; background-color: pink; } </style> <body> <!-- HTML结构 --> <button>动起来</button> <div></div> <!-- js 代码 --> <script> $(function() { $('button').click(function() { // 第一个参数必写,而且以对象形式传递 $('div').animate({ left: 400, top: 300, opacity: 0.5 }, 500, function() { alert('说动就动') }); }) }) </script> </body>
注意:自定义动画的第一个参数要以对象的形式传入需要修改的样式属性,必写的
5. 动画队列及其停止队列方法
5.1 动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就会造成多个动画或者效果排队执行。通俗的讲就是会等上一个动画或效果完成后再去执行下一个,直到把触发的所有动画或效果执行完,这往往与我们的本意会背道而驰,所以需要防止该情形的发生,因此,就出现了停止队列方法。
5.2 停止队列
语法:stop()
① stop() 方法用于停止动画或效果。
② 注意:stop() 写到动画或者效果的前面,相当于停止结束上一次的动画,而只要触发当前这次动画或效果即可。
6. 事件切换
6.1 语法规范
语法:hover([over] , out)
① over: 表示鼠标移到元素上要触发的函数(相当于 mouseenter )
② out: 表示鼠标移出元素时要触发的函数 ( 相当于 mouseleave )
6.2 代码体验--案例--下拉菜单
<!-- 导入 jQuery 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- css样式 --> <style> * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } a { text-decoration: none; color: #666 } .nav { margin: 100px; } .nav>li { float: left; width: 90px; text-align: center; line-height: 50px; height: 50px; background-color: #ccc; margin-right: 10px; } .nav>li>ul { display: none; } .nav>li>ul>li { width: 90px; height: 45px; line-height: 45px; background-color: peachpuff; border: 1px solid palegoldenrod; } </style> <body> <!-- HTML结构 --> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li> <a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li> <a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li> <a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> </ul> <script> $(function() { // 1. 事件切换 hover 就是鼠标经过和离开的复合写法 // 第一个参数表示鼠标经过,第二个表示鼠标离开 /* $('.nav>li').hover(function() { $(this).children('ul').slideDown(300); }, function() { $(this).children('ul').slideUp(300); }) */ // 2. 事件切换 hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数 $('.nav>li').hover(function() { // stop() 方法必须写到动画的前面,这里的动画是slideToggle(),所以写在它前面 $(this).children('ul').stop().slideToggle(300); }); }) </script> </body>
注意:
① 事件切换 hover 中,第一个参数可以省略,如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数。
② 由于该案例鼠标经过向下滑出二级菜单,鼠标离开向上滑入二级菜单,而滑动效果还有一个滑动切换,所以事件切换 hover 可以结合使用slideToggle() ,使用一个函数就可以实现效果,达成代码的最简。同时在效果前加上stop() 方法,可以阻止出现动画错乱。
7. 案例--高亮显示图片
需求:鼠标移入哪张图片,就突出该图片,即高亮显示
<!-- 导入 jQuery 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- css样式 --> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #000; } .clear::after { content: ""; display: block; clear: both; } .box { margin: 100px auto; width: 642px; border: 1px solid #ccc; padding-left: 10px; padding-bottom: 10px; } .box ul li { list-style: none; float: left; margin: 10px 10px 0 0; } </style> <body> <!-- HTML结构 --> <div class="box"> <ul class="clear"> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li> <li><img src="images/03.jpg" alt=""></li> <li><img src="images/04.jpg" alt=""></li> <li><img src="images/05.jpg" alt=""></li> <li><img src="images/06.jpg" alt=""></li> </ul> </div> <!-- js 代码 --> <script> $(function() { $('.box li').hover(function() { // 当鼠标移入时,其他的li标签透明度:0.5 $(this).siblings('li').stop().fadeTo(500, .5); // 鼠标离开,其他li 透明度改为1 }, function() { $(this).siblings('li').stop().fadeTo(500, 1) }) }) </script> </body>
案例分析:
① 所谓的高亮显示,其实是通过修改透明度实现的,鼠标移入的图片透明度不变,而是改变它的兄弟图片的透明度为0.5,它们变暗了,自然当前图片就显得高亮了;
② 鼠标移出,让其兄弟透明度更改回1,这样当前图片自然不突出了,变为普通样式。
jQuery 给我们封装的这些动画效果,非常简洁好用,而且使用方式几乎一样,所以只要记住一种就可以类比使用其他效果,但要注意特殊效果fadeTo()。