【第五章】jQuery中事件处理和动画效果3

最新推荐文章于 2020-06-20 10:22:16 发布

来颗溜溜莓

最新推荐文章于 2020-06-20 10:22:16 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/qq_45095748/article/details/102997431

版权

这篇博客详细介绍了jQuery中的动画效果，包括hide()方法用于隐藏元素，show()方法显示元素，toggle()方法切换元素可见性，以及fade系列方法实现淡入淡出效果。此外，还探讨了slide方法如何通过高度变化实现元素的滑动显示和隐藏。

摘要由CSDN通过智能技术生成

jQuery中的动画效果

5.2.1隐藏匹配元素

hide()方法相当于元素css样式属性display的值设置为none，他会记住原来的display的值。hide()方法有两种语法格式：
1.hide();
2.hide(speed,[callback])
speed:指定动画时长。 callback:可选参数，用于隐藏完成后要触发的回调函数。
jQuery的任何动画效果，都可以使用默认的3个参数，slow（600毫秒），normal（400毫秒）和fast（200毫秒）。在使用默认参数时需要引号，例如：show(“fast”),使用自定义参数时，不需要加引号，例如：show（300）。

5.2.2显示匹配元素

show（）方法可以显示匹配元素。show（）方法相当于css样式属性display的值设置block或inline或除了none以外的值。他会恢复应用display：none之前的可见属性。两种方式：
1.show()
2.show(speed,[callback])
speed:指定动画时长。 callback:可选参数，用于隐藏完成后要触发的回调函数。

(5-8)例子：

编写css样式

<style>
			#mennu{
   
				float: left;
				width: 120px;
				height: 350px;
			}
			#tupian{
   
				float: left;
			}
			 li{
   
				float:left;
				width:100px;
				display:block;
				}
			 a{
   
				float:left;
				display:block;
				line-height:28px; /**每个超链接之间的距离**/
				text-decoration:none;/**取消超链接下的横线**/
				 }
			li a:hover{
   
				color:red;
				}
		</style>

<body>
		<div id="mennu">
			<div style="position:relative;">
				<div style="position: absolute;">
			<ul>
				<li><a href="1171.html">图书介绍</a></li>
				<li><a href="1171.html">新书预告</a></li>
				<li><a href="1171.html">图书销售</a></li>
				<li><a href="1171.html">勘误发布</a></li>
				<li><a href="1171.html">资源下载</a></li>
				<li><a href="1171.html">好书推荐</a></li>
				<li><a href="1171.html">技术支持</a></li>
				<li>

最低0.47元/天解锁文章

来颗溜溜莓

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【第五章】jQuery中事件处理和动画效果3

jQuery中的动画效果5.2.1隐藏匹配元素hide()方法相当于元素css样式属性display的值设置为none，他会记住原来的display的值。hide()方法有两种语法格式：1.hide();2.hide(speed,[callback])speed:指定动画时长。 callback:可选参数，用于隐藏完成后要触发的回调函数。jQuery的任何动画效果，都可以使用默认的3...
复制链接

扫一扫