jQuery的滑动效果（slideDown()，slideUp（），slideToggle()）的应用方法

Half_Sweet

于 2021-02-07 17:23:00 发布

阅读量1.3k

点赞数 2

文章标签： javascript html jquery

本文链接：https://blog.csdn.net/Enough0/article/details/113744375

版权

鼠标移入时内容向下滑出，鼠标移开时内容向上滑动隐藏的三种方法

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（）的功能是停止动画或效果，相当于结束上一次动画或效果。

运行效果如下：
鼠标不悬浮在任何一个标题上时：
在这里插入图片描述悬浮在音乐上时：

在这里插入图片描述

Half_Sweet

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
jQuery的滑动效果（slideDown()，slideUp（），slideToggle()）的应用方法

鼠标移入展开下拉菜单，移除隐藏<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul, li { margin: 0; padding: 0; } li { list-style: none; } .title
复制链接

扫一扫