🙋 哈喽大家好，本次是jQuery案例练习系列第四期
⭐本期是jQuery动画——停止动画、淡入淡出、自定义动画
🏆系列专栏：前端案例练习
😄笔者还是前端的菜鸟，还请大家多多指教呀~
👍欢迎大佬指正，一起学习，一起加油！
停止动画
使用动画的过程中，如果在同一个元素上调用一个以上的动画方法，那么对这个元素来说，除了当前正在调用的动画，其他的动画将被放到效果队列中，这样就形成了动画队列。
动画队列
动画队列中所有动画都是按照顺序执行的，默认只有当前的一个动画执行完毕，才会执行后面的动画。为此，jQuery提供了stop（）方法用于停止动画效果。通过此方法，可以让动画队列后面的动画提前执行。
stop（）方法
stop（）方法适用于所有的jQuery效果，包括元素的淡入淡出、自定义动画等。语法如下👇
$(selector).stop(stopAll,goToEnd);
stopAll：用于规定是否清除动画队列，默认是false；
goToEnd：用于规定是否立即完成当前的动画，默认是false。
stop（）方法的常用方式
参数设置不同，作用也不同。
| 参数 | 作用 |
| $(“div”).stop(); | 停止当前动画，继续下一个动画 |
| $(“div”).stop(true); | 清除div元素动画队列中的所有动画 |
| $(“div”).stop(true,true); | 停止当前动画，清除动画队列中的所有动画 |
| $(“div”).stop(false,true); | 停止当前动画，继续执行下一个动画 |
淡入淡出动画
淡入淡出方法
| 方法 | 说明 |
| fadeIn([speed],[easing],[fn]) | 淡入显示匹配元素 |
| fadeOut([speed],[easing],[fn]) | 淡出隐藏匹配元素 |
| fadeTo([speed],opacity,[easing],[fn]) | 以淡入淡出方式将匹配元素调整到指定的透明度 |
| fadeToggle([speed],[easing],[fn]) | 在fadeIn()和fadeOut()两种效果之间切换 |
注意：fadeTo()方法的参数opacity表示透明度数值，范围在0~1之间，0代表完全透明，0.5代表50%透明，1代表完全不透明。
显示效果
淡入淡出
HTML
思路：
1、设置一个盒子（box）存放方块；
2、设置一组div方块放在盒子中。
<body> <div class="box"> <div class="red"></div> <div class="green"></div> <div class="orange"></div> <div class="blue"></div> </div> </body>
CSS
思路：
1、设置每一个方块的大小、浮动、间距；
2、设置盒子的大小、边距、边框；
3、 给每一个方块设置颜色；
<style> /* 设置每一个方块的大小、浮动、间距 */ div { width: 100px; height: 100px; float: left; margin-left: 5px; } /* 设置盒子的大小、边距、边框 */ .box { width: 425px; height: 105px; padding-top: 5px; border: 1px solid #ccc; } /* 给每一个方块设置颜色 */ .red { background-color: red; } .green { background-color: green; } .orange { background-color: orange; } .blue { background-color: blue; } </style>
jQuery
思路：
1、引入jQuery库👇；
2、为所有颜色方块设置2秒完成半透明的淡入效果（fadeTo）；
3、添加鼠标滑过的函数（hover）；
4、为每一个方块设置动画效果，即当前元素（this）。当鼠标指针移入时，正常显示，鼠标指针移出时，设置成半透明的效果，效果如下👇
<script> $(document).ready(function () { $(".box div").fadeTo(2000, 0.2); $(".box div").hover( function () { $(this).fadeTo(1, 1); }, function () { $(this).fadeTo(1, 0.2); } ); }); </script>
自定义动画
为了满足动画实现的灵活性，解决单个方法实现动画的单一性。jQuery中提供了animate（）方法让用户可以自定义动画。
animate（）语法
$(selector).animate(params[,speed][,easing][,fn]);
注意：
params表示想要更改的样式，以对象形式传递，样式名可以不用带引号，但如果样式名中有“-”（如：borde-left），需要用驼峰命名法（如borderLeft）。
代码演示
实现效果
自定义动画
代码及思路
思路：
1、定义按钮，定义div元素；
2、设置盒子的大小、颜色、绝对定位（position：absolute），绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的，默认是body；
3、给定义的按钮绑定点击事件；
4、设置动画，当单击鼠标时，div元素运动到距离左侧500px，距离顶部300px的位置，透明度为0.4，宽度为500px；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>自定义动画</title> <script src="./jquery-3.3.1.min.js"></script> <style> div { width: 50px; height: 50px; background-color: blue; position: absolute; } </style> <script> $(document).ready(function () { $("button").click(function () { $("div").animate( { left: 500, top: 300, opacity: 0.4, width: 500, }, 500 ); }); }); </script> </head> <body> <button>动起来</button> <div></div> </body> </html>
总结
以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏，持续更新呢~
咱们下期再见~
