jQuery框架（四）：动画效果
下面是小凰凰的简介，看下吧！
人生态度：珍惜时间，渴望学习，热爱音乐，把握命运，享受生活
学习技能：网络 -> 云计算运维 -> python全栈( 当前正在学习中)
您的点赞、收藏、关注是对博主创作的最大鼓励，在此谢过！
有相关技能问题可以写在下方评论区，我们一起学习，一起进步。
后期会不断更新python全栈学习笔记，秉着质量博文为原则，写好每一篇博文。
文章目录
- 1、显示、隐藏动画
- （1）显示
- （2）隐藏
- （3）实现点击按钮显示、隐藏盒子
- （4）开关式显示隐藏动画
- 2、滑入、滑出动画
- （1）滑入
- （2）滑出
- （3）滑入滑出的toggle方法
- （4）实战演练
- 3、淡入、淡出动画
- （1）淡入
- （2）淡出
- （3）淡入淡出的toggle方法
- 4、停止动画
- 5、animate自定义动画
1、显示、隐藏动画
（1）显示
方式一：
$("div").show();
解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。
方式二：
$('div').show(3000);
解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。
方式三：
$("div").show("slow");
参数可以是：
slow 慢：600ms
normal 正常：400ms
fast 快：200ms
解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。
方式四：
//show(毫秒值，回调函数;
$("div").show(5000,function () {
alert("动画执行完毕！");
});
解释：动画执行完后，'立即执行回调函数。'
总结：上面的四种方式几乎一致，参数可以有两个。第一个是动画的执行时长，第二个是动画结束后执行的回调函数。
（2）隐藏
方式参照上面的show()方法的方式。如下：
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function(){});
（3）实现点击按钮显示、隐藏盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: green;
border: 1px solid red;
display: none;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">隐藏</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//jquery 提供了一些方法 show() hide() 控制元素显示隐藏
var isShow = true;
$('#btn').click(function(){
if(isShow){
$('#box').show('slow',function(){
$(this).text('盒子出来了');
$('#btn').text('显示');
isShow = false;
})
}else{
$('#box').hide(2000,function(){
$(this).text('');
$('#btn').text('隐藏');
isShow = true;
})
}
})
</script>
</html>
（4）开关式显示隐藏动画
$('#box').toggle(3000,function(){});
显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。
代码如下：
$('#btn').click(function(){
$('#box').toggle(3000,function(){
$(this).text('盒子出来了');
if ($('#btn').text()=='隐藏') {
$('#btn').text('显示');
}else{
$('#btn').text('隐藏');
}
});
})
2、滑入、滑出动画
什么样子叫滑入、滑出：
像卷帘门一样的动画效果！
（1）滑入
$(selector).slideDown(speed, 回调函数);
解释：下拉动画，显示元素。
注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/fadeOut/slideUp）
（2）滑出
$(selector).slideUp(speed, 回调函数);
解释：上拉动画，隐藏元素。
（3）滑入滑出的toggle方法
$(selector).slideToggle(speed, 回调函数);
（4）实战演练
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
display: none;
background-color: green;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () {
//滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);
$("div").slideDown(2000, function () {
alert("动画执行完毕！");
});
})
//滑出动画
$("button:eq(1)").click(function () {
//滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
$("div").slideUp(2000, function () {
alert("动画执行完毕！");
});
})
$("button:eq(2)").click(function () {
//滑入滑出自动切换（同样有四种用法）
$("div").slideToggle(1000);
})
})
</script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div>
</body>
</html>
3、淡入、淡出动画
（1）淡入
$(selector).fadeIn(speed, callback);
作用：让元素以淡淡的进入视线的方式展示出来。
（2）淡出
$(selector).fadeOut(1000);
作用：让元素以渐渐消失的方式隐藏起来
（3）淡入淡出的toggle方法
$(selector).fadeToggle('fast', callback);
作用：通过改变透明度，切换匹配元素的显示或隐藏状态。
参数的含义同show()方法。
（4）实战演练
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
display: none;
/*透明度*/
opacity: 0.5;
background-color: red;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () {
// //淡入动画用法1: fadeIn(); 不加参数
$("div").fadeIn();
// //淡入动画用法2: fadeIn(2000); 毫秒值
// $("div").fadeIn(2000);
// //通过控制 透明度和display
//淡入动画用法3: fadeIn(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").fadeIn("slow");
// $("div").fadeIn("fast");
// $("div").fadeIn("normal");
//淡入动画用法4: fadeIn(毫秒值，回调函数[显示完毕执行什么]);
// $("div").fadeIn(5000,function () {
// alert("动画执行完毕！");
// });
})
//滑出动画
$("button:eq(1)").click(function () {
// //滑出动画用法1: fadeOut(); 不加参数
$("div").fadeOut();
// //滑出动画用法2: fadeOut(2000); 毫秒值
// $("div").fadeOut(2000); //通过这个方法实现的：display: none;
// //通过控制 透明度和display
//滑出动画用法3: fadeOut(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").fadeOut("slow");
// $("div").fadeOut("fast");
// $("div").fadeOut("normal");
//滑出动画用法4: fadeOut(毫秒值，回调函数[显示完毕执行什么]);
// $("div").fadeOut(2000,function () {
// alert("动画执行完毕！");
// });
})
$("button:eq(2)").click(function () {
//滑入滑出切换
//同样有四种用法
$("div").fadeToggle(1000);
})
$("button:eq(3)").click(function () {
//改透明度
//同样有四种用法 透明度
$("div").fadeToggle(1000, 0.5, function () {
alert(1);
});
})
})
</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>改透明度为0.5</button>
<div></div>
</body>
</html>
4、停止动画
$(selector).stop(true, false);
里面的两个参数，有不同的含义。
第一个参数：
- true：后续动画不执行。
- false：后续动画会执行。
第二个参数：
- true：立即执行完成当前动画。
- false：立即停止当前动画。
PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。记住只要有动画存在，就必须使用stop，在动画开始之前，把之前的动画停止，不然动画呈现次数会叠加。
案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
}
.wrap li {
background-color: green;
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
style>
<script src="jquery-3.3.1.js">script>
<script>
//入口函数
$(document).ready(function () {
//需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
var jqli = $(".wrap>ul>li");
//绑定事件
jqli.mouseenter(function () {
$(this).children("ul").stop().slideDown(1000);
});
//绑定事件(移开隐藏)
jqli.mouseleave(function () {
$(this).children("ul").stop().slideUp(1000);
});
});
script>
head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1a>
<ul>
<li><a href="javascript:void(0);">二级菜单2a>li>
<li><a href="javascript:void(0);">二级菜单3a>li>
<li><a href="javascript:void(0);">二级菜单4a>li>
ul>
li>
<li>
<a href="javascript:void(0);">二级菜单1a>
<ul>
<li><a href="javascript:void(0);">二级菜单2a>li>
<li><a href="javascript:void(0);">二级菜单3a>li>
<li><a href="javascript:void(0);">二级菜单4a>li>
ul>
li>
<li>
<a href="javascript:void(0);">三级菜单1a>
<ul>
<li><a href="javascript:void(0);">三级菜单2a>li>
<li><a href="javascript:void(0);">三级菜单3a>li>
<li><a href="javascript:void(0);">三级菜单4a>li>
ul>
li>
ul>
div>
body>
html>
上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。
5、animate自定义动画
$(selector).animate({params}, speed, callback);
作用：执行一组CSS属性的自定义动画。
- 第一个参数表示：要执行动画的CSS属性（必选）
- 第二个参数表示：执行动画时长（可选）
- 第三个参数表示：动画执行完后，立即执行的回调函数（可选）
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
注意：只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。
只有第一个参数，改变 "div" 元素的高度，speed默认为normal：
$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});
指定speed参数：
$(".btn1").click(function(){
$("#box").animate({height:"300px"},'slow');
});
默认动画的速度。默认是 "normal"。
可选的值有：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
callback后续添加！