jQuery的滑动效果（slideDown()，slideUp（），slideToggle()）的应用方法
鼠标移入时内容向下滑出，鼠标移开时内容向上滑动隐藏的三种方法
slideDown()：向下滑出直到全部显现；
slideUp（）：向上滑走直到消失；
slideToggle()：向下和向上滑动两个动作切换。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,
li {
margin: 0;
padding: 0;
color: #7B68EE;
}
li {
list-style: none;
}
.title {
float: left;
width: 100px;
}
.titleTxt {
display: inline-block;
width: 40px;
}
.sub {
display: none;
margin-top: 10px;
width: 120px;
}
</style>
</head>
<body>
<ul>
<li class="title">
<span class="titleTxt">音乐</span>
<ul class="sub">
<li>Perfect</li>
<li>One Day</li>
<li>Love story</li>
</ul>
</li>
<li class="title">
<span class="titleTxt">电影</span>
<ul class="sub">
<li>唐人街探案3</li>
<li>你好，李焕英</li>
<li>刺杀小说家</li>
</ul>
</li>
<li class="title">
<span class="titleTxt">综艺</span>
<ul class="sub">
<li>王牌对王牌</li>
<li>青春环游记</li>
<li>running man</li>
</ul>
</li>
</ul>
<script src="../../jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 鼠标悬浮在标题上子内容展开
$(function() {
// 方法一:
$('.titleTxt').mouseover(function() {
$(this).parent().children('ul').stop().slideDown()
})
$('.titleTxt').mouseout(function() {
$(this).parent().children('ul').stop().slideUp()
})
// 方法二：
// hover是鼠标经过和鼠标移开的复合写法
$('.titleTxt').hover(function() {
//鼠标移入
$(this).parent().children('ul').stop().slideDown()
},function() {
//鼠标移出
$(this).parent().children('ul').stop().slideUp()
})
// 方法三：
$('.titleTxt').hover(function() {
//鼠标移入移出执行的同一个函数，就只用写一个函数
$(this).parent().children('ul').stop().slideToggle()
})
})
</script>
</body>
</html>
注意：每个效果前我都加了stop( )，是为了停止排队，动画或效果一旦触发就会执行，如果多次触发，就会造成效果或队列排队执行
stop（ ）的功能是停止动画或效果，相当于结束上一次动画或效果。
