show
概念:显示隐藏的匹配元素 语法：show(speed,callback) 参数：
- speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）
- callback:在动画完成时执行的函数，每个元素执行一次
hide
hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。
可以通过show（）和hide（）方法，来动态控制元素的显示隐藏
toggle
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
<script>
$(function(){
// 显示动画
$('#show').click(function(){
// show(动画的时间，回调函数)
// 动画的时间:fast 200ms,normal 400ms,slow 600ms
$('.box').show('normal',function(){
$(this).text('show ...');
});
});
// 隐藏动画
$('#hide').click(function(){
$('.box').hide('fast');
});
// 开关式 显示隐藏
$('#toggle').click(function(){
// 动画和定时器一样，先关动画 再开动画
// $('.box').toggle(2000);
$('.box').stop().toggle(2000);
});
});
</script>
slideDown
概念：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数
用法和参数跟上面类似
slideUp
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
用法和参数跟上面类似
slideToggle
概念:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
跟toggle用法类似
<script>
$(function(){
$('#slideDown').click(function(){
$('.box').slideDown(2000);
});
$('#slideUp').click(function(){
$('.box').slideUp(500);
});
$('#toggleSlide').click(function(){
$('.box').stop().slideToggle(100);
});
});
</script>
fadeIn
概念：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化
fadeOut
概念：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeTo
概念：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeToggle
概念：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
实现淡入淡出的效果就是使用此方法
<script>
$(function(){
$('#fadeIn').click(function(){
$('.box').fadeIn(2000);
});
$('#fadeOut').click(function(){
$('.box').fadeOut(500);
});
$('#fadeToggle').click(function(){
$('.box').stop().fadeToggle(3000);
});
});
</script>
animate
概念：用于创建自定义动画的函数
语法：animate(params,[speed],[fn])
参数：
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
<script>
$(function(){
var json = {
"200",
height: "200",
top: "200",
left: "500",
"border-radius": "200",
};
var json2 = {
"0",
height: "0",
left: "1000",
};
// animate(队列的属性，时间，fn)
$('button').click(function(){
$('div').stop().animate(json,2000,function(){
$('div').animate(json2,1000,function(){
alert('!!!');
});
});
});
});
</script>
stop
概念：停止所有在指定元素上正在运行的动画
语法：stop([clearQueue],[jumpToEnd])
参数：
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等
delay
概念：用来做延迟的操作
语法：delay(1000)，一秒之后做后面的操作
二级菜单动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
</ul>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
//
var jqli = $('.wrap>ul>li');
// jq:mouseenter/mouseleave
// js:onmouseover/onmouseout
// 绑定事件
jqli.mouseenter(function(){
$(this).children('ul').stop().slideDown(1000);
});
// 绑定事件
jqli.mouseleave(function(){
$(this).children('ul').stop().slideUp(1000);
});
});
</script>
</body>
</html>