jQuery的动画

最新推荐文章于 2024-07-16 17:18:30 发布

悲伤的小花

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量162

点赞数

文章标签： jquery css css3

本文链接：https://blog.csdn.net/sinat_39119933/article/details/127380649

版权

一，jQuery的样式操作

jQuery中常用的样式操作有两种：css()和设置样式方法

1.1操作css方法：

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。常用以下三种形式：

1.参数只写属性名，则是返回属性值

var strColor=$(this).css('color');

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(''color'',''red'');

3.参数可以是对象形式，方便设置多样式

$(this).css({ "color":"white","font-size":"20px"})

注意：css()多用于样式少时操作，多了则不太方便

二，显示和隐藏动画

1.显示： .show()

2.隐藏： .hide()

三，滑入滑出动画

1.向上滑动： .slideUp()

2.向下滑动： .slideDown()

3.淡入：fadeIn()

4.淡出：fadeOut（）

例题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			ul li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			#main{
				width: 350px;
				border: 1px antiquewhite solid;
				margin: 10px auto;
				overflow: auto;
			}
			#head{
				width: 350px;
				height: 50px;
				line-height: 50px;
				overflow: auto;
				background-color: darkgrey;
			}
			#head h2{
				float: left;
				margin-left: 10px;
			}
			#head span{
				display: block;
				width: 25px;
				height: 12.5px;
				background: url(img/pic.png);
				float: right;
				margin-top: 18px;
				margin-right: 10px;
			}
			#content{
				padding: 10px;
				overflow: auto;
				/*高度自适应*/
			}
			#content ul li{
				width: 110px;
				height: 25px;
				line-height: 25px;
				float: left;
			}
			#foot a{
				display: block;
				width: 60px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				float: right;
				margin-right: 10px;
			}
		</style>
		<script src="js/jquery.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#pic").click(function(){
					//需要判断一种状态，如果是a变成b 否则变成a
									
					//var index=$(this).attr("index");
					//$("#content").is(":visible")是可用状态
					if($("#content").is(":visible")){
						//完成图片更换和下面部分隐藏
						$(this).css("background","url(img/pic.png) 0 12.5px");
						$("#content").slideUp(1000);
						$("#foot").slideUp(1000);
					// 	//改变本身的标记
						$(this).attr("index",1)
					}else{
						$(this).css("background","url(img/pic.png)");
						$("#content").slideDown(1000);
						$("#foot").slideDown(1000);
						//改变本身的标记
						$(this).attr("index",0)
					}
	
	
				});
				
				
				
				var flag=true;
				//菜单简化
				$("#foot a").click(function(){
				  if(flag){
					 //点击的时候 索引大于4的隐藏 最后一个不隐藏
					 $("#content>ul>li:gt(4)").not(":last").fadeOut();
					 //内容变成更多
					 $(this).text("更多👉") ;
					 flag=false;
				  }else{
					  $("#content>ul>li").fadeIn();
					  $(this).text("简化👈");
					  flag=true;
				  }
					//  if(!$("#content>ul>li").is(":hidden")){
					// //点击的时候 索引大于4的隐藏 最后一个不隐藏	
					// $("#content>ul>li:gt(4)").not(":last").fadeOut()
					// //内容变成更多
					// $(this).text("更多👉")
					// }else{
					// 	//点击的时候 所有的li显示
					// 	$("#content>ul>li").fadeIn()
					// 	$(this).text("简化👈")
					// }
					
					
					//不跳转
				      return false;
					
				});
	
			});
		</script>
	</head>
	<body>
		<div id="main">
					<div id="head">
						<h2>图书分类</h2>
						<span id="pic" index="0">
		
						</span>
					</div>
					<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>

		
	</body>
</html>