JQuery实现DIV的显示与隐藏

最新推荐文章于 2023-09-14 18:51:30 发布

小李讲源码

最新推荐文章于 2023-09-14 18:51:30 发布

阅读量1k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/ncut_LJD/article/details/50910626

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.动画

animate

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#div1").animate({height:"500px",width:"500px"},4000);
	// JQuery链式操作
	//$("#div1").animate({height:"500px"},2000).animate({width:"500px"},2000);
});
</script>
<style type="text/css">
#div1
{
	width:100px;
	height:100px;
	background-color:red;
	border:1px black solid;
}
</style>
</head>

<body>
<div id="div1"></div>
</body>
</html>

2.隐藏与显示

显示：show() 隐藏: hide()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		if($("#div1").css("display")=="none")
		{
			$("#info").html("正在显示...");
			$("#div1").show(2000,function(){
				$("#info").html("显示完毕");
			});
		}
		else
		{
			$("#info").html("正在隐藏...");
			$("#div1").hide(2000,function(){
				$("#info").html("隐藏完毕");
			});
		}
		
		/*$("#div1").toggle(2000);*/
	});
});
</script>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	/*clear 属性设置一个元素的侧面是否允许其他的浮动元素。  both左右两侧均不允许浮动元素*/
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
</head>

<body>
<input type="button" value="替换" id="btn"/>
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

为什么我们要用到clear呢？

因为浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

所以我们需要clear:both 来清除掉左右的浮动框