show()方法和hide()方法

最新推荐文章于 2024-05-29 15:14:06 发布

张大仙是个妖怪

最新推荐文章于 2024-05-29 15:14:06 发布

阅读量1.8w

点赞数 4

分类专栏： # jQuery中的动画文章标签： jQuery show方法和hide方法

本文链接：https://blog.csdn.net/NDKHBWH/article/details/66970236

版权

jQuery中的动画专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.show()方法和hide()方法是jquery中最基本的动画方法.为一个元素调用hide()方法,会将该元素样式改为none

$("element").hide()与$("element").css("display","none")相同

2.当把元素隐藏后,可以使用show()方法将元素diplay样式设置为先前的显示状态

<style type="text/css">
*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
</style>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
	     $(this).next().hide();
	},function(){
	     $(this).next().show();
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">什么是jQuery?</h5>
	<div class="content">
		jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
	</div>
</div>
</body>

3.show()方法和hide()方法让元素动起来

show()方法和hide()方法在不带任何参数的情况下,相当于css("display","none/block/inline")作用是立即隐藏或显示匹配的元素,不会有任何动画.可以为show()方法指定一个速度参数,例如show在600毫秒显示出来,normal,400;fast,200

4.hide(600)会同时减少"内容"的高度,宽度和不透明度,直至这3个属性的值都为0,最后设置css为"display:none".同理,show(600)方法则会从上到下增大"内容"的高度,从左到右增大内容宽度,同时增加内容不透明度

<style type="text/css">
*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
</style>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
	     $(this).next().hide(1600);
	},function(){
	     $(this).next().show(2600);
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">什么是jQuery?</h5>
	<div class="content">
		jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
	</div>
</div>
</body>

张大仙是个妖怪

关注

4
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
show()方法和hide()方法

1.show()方法和hide()方法是jquery中最基本的动画方法.为一个元素调用hide()方法,会将该元素样式改为none$("element").hide()与$("element").css("display","none")相同2.当把元素隐藏后,可以使用show()方法将元素diplay样式设置为先前的显示状态3.show()方法和hide()方法让元素动起来show()方法和hide()方法在不带任何参数的情况下,相当于css("display","none/block/
复制链接

扫一扫

专栏目录