jQuery课堂笔记（二）

最新推荐文章于 2024-08-26 20:25:07 发布

程果果.

最新推荐文章于 2024-08-26 20:25:07 发布

阅读量214

点赞数

文章标签： jquery 动画 javascript

本文链接：https://blog.csdn.net/weixin_73656077/article/details/127377305

版权

一.jQuery动画的三种方式：

1.默认显示和隐藏方式

2.滑动显示和隐藏方式

3.淡入淡出显示和隐藏方式

1. 默认的显示和隐藏方式

(1) show([speed,[easing],[fn]])
如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

(2) hide([speed,[easing],[fn]])
隐藏,如果选择的元素是隐藏的，这个方法将不会改变任何东西。
(3) toggle([speed],[easing],[fn])
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

1. speed：动画的速度，可以自定义值(如：1000)毫秒数，它还有三个预定义的值(“slow”,“normal”, “fast”)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
swing：动画执行时效果是先慢，中间快，最后又慢
linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。滑动显示和隐藏方式
2(1). slideDown([speed],[easing],[fn])
通过高度变化（向下增大）来动态地显示所有匹配的元素。
2(2). slideUp([speed,[easing],[fn]])
通过高度变化（向上减小）来动态地隐藏所有匹配的元素
2(3). slideToggle([speed],[easing],[fn])
与toggle功能相同，只是显示的动画效果不同

3.淡入淡出显示和隐藏方式
3(1). fadeIn([speed],[easing],[fn])
淡入效果（渐渐浮现）
3(2). fadeOut([speed],[easing],[fn])
淡出效果（渐渐隐藏）
3(3). fadeToggle([speed,[easing],[fn]])
与toggle功能相同，只是显示的动画效果不同

例如：

if ($("#content>ul>li").is(":hidden")) {
						// 显示
						$("#content>ul>li").fadeIn(500);
						$(this).text("简化☚");
						return false;
					} else {
						// 隐藏
						$("#content>ul>li:gt(4)").not(":last").fadeOut(800);
						$(this).text("更多");
						return false;
					}

二.

图书管理分类例题：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			ul li{
				width: 90px;
				list-style: none;
				float: left;
				font-size: 13px;
			}
			ul li i{
				font-family: "楷体";
			}
			.clear{
				clear:both;
			}
			#main{
				width: 300px;
				margin: 50px auto;
				border: 1px black solid;
				
			}
			#head{
				
				width: 300px;
				height: 50px;
				line-height: 50px;
				background-color: darkgray;
				
			}
			#head h2{
				width: 200px;
				float: left;
				margin-left: 10px;
				line-height: 50px;
				font-family: "楷体";
				
			}
			#head span{
				display: block;
				width: 25px;
				height: 12.5px;
				float: right;
				margin-top: 16px;
				background: url(img/pic.png);
				/*border: 1px solid;*/
				margin-right: 5px;
			}
			#content ul li a{
				color: black;
				font-family: "楷体";
			}
			#foot{
				float: right;
				margin-top: 10px;
				margin-right: 10px;
			}
			#foot a{
				color: darkslateblue;
				float: right;
				font-family: "楷体";
			}
			#body {
   				 margin: 10px ;
 		    }
			.c1{
    			clear: both;
      		}
		</style>
		<script src="js/jquery.min.js"></script>
  		<script type="text/javascript">
   			$(function() {
    			$("#pic").click(function() {
    				 var index = $(this).attr("index")
     				if (index == 0) {
      					$(this).css("background", "url(img/pic.png)0-12.5px")
     				 	$(this).css("margin-top", "28px")
     					$(this).attr("index", "1")
      					$("#body").slideUp(600)
     				} else {
      					$(this).css("background", "url(img/pic.png)")
      					$(this).css("margin-top", "16px")
      					$(this).attr("index", "0")
      					$("#body").slideDown(600)
    				}
    		});
    		$("#foot>a").click(function() {
					if ($("#content>ul>li").is(":hidden")) {
						// 显示
						$("#content>ul>li").fadeIn(500);
						$(this).text("简化☚");
						return false;
					} else {
						// 隐藏
						$("#content>ul>li:gt(4)").not(":last").fadeOut(800);
						$(this).text("更多");
						return false;
					}
				});
   		});
   		</script>
	</head>
	<body>
		<div id="main">
			<div id="head">
				<h2>图书分类</h2>
				<span id="pic" index="0">
					
				</span>
			</div>
			<div id="body">
				<div id="content">
					<ul>
						<li><a href="#">小说</a><i>(1110)</i></li>
						<li><a href="#">文艺</a><i>(2350)</i></li>
						<li><a href="#">青春</a><i>(1985)</i></li>
						<li><a href="#">少儿</a><i>(1102)</i></li>
						<li><a href="#">生活</a><i>(2350)</i></li>
						<li><a href="#">社科</a><i>(5684)</i></li>
						<li><a href="#">管理</a><i>(1256)</i></li>
						<li><a href="#">计算机</a><i>(2135)</i></li>
						<li><a href="#">教育</a><i>(3120)</i></li>
						<li><a href="#">工具书</a><i>(4213)</i></li>
						<li><a href="#">引进版</a><i>(1752)</i></li>
						<li><a href="#">其他类</a><i>(9872)</i></li>
					</ul>
				</div>
				<div id="foot">
					<a href="">简化☚</a>
				</div>
				<div class="c1">
              </div>
			</div>
		</div>

	</body>
</html>

程果果.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery课堂笔记（二）

如果选择的元素是可见的，这个方法将不会改变任何东西。1. speed：动画的速度，可以自定义值(如：1000)毫秒数，它还有三个预定义的值(“slow”,“normal”, “fast”)2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"3. fn：在动画完成时执行的函数，每个元素执行一次。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。隐藏,如果选择的元素是隐藏的，这个方法将不会改变任何东西。1. 默认的显示和隐藏方式。1.默认显示和隐藏方式。
复制链接

扫一扫