jQuery的滑动效果(slideDown(),slideUp(),slideToggle())的应用方法

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

slideDown():向下滑出直到全部显现;
slideUp():向上滑走直到消失;
slideToggle():向下和向上滑动两个动作切换。


<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>Perfectli>
					<li>One Dayli>
					<li>Love storyli>
				ul>

			li>
			<li class="title"> 
				<span class="titleTxt">电影span>
				<ul class="sub">
					<li>唐人街探案3li>
					<li>你好,李焕英li>
					<li>刺杀小说家li>
				ul>
			li>
			<li class="title"> 
				<span class="titleTxt">综艺span>
				<ul class="sub">
					<li>王牌对王牌li>
					<li>青春环游记li>
					<li>running manli>
				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( )的功能是停止动画或效果,相当于结束上一次动画或效果。

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

jQuery的滑动效果(slideDown(),slideUp(),slideToggle())的应用方法_第1张图片

你可能感兴趣的:(javascript,html,jquery)