jquery显示与隐藏效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
toggle方法可以动态让隐藏的元素显示,让显示的元素隐藏

加粗样式
从显示的变化来看得出以下结论: show方法和hide方法还有toggle方法,它们能动态地改变当前元素的高度、宽度和不透明度,决定最终显示或者隐藏当前元素。

案例效果:
在这里插入图片描述
案例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container {
      
      
			 height: 300px;
			 width: 300px;
			 background-color: pink;
		 }
		</style>
		<script src="js/new_file.js"></script>
	</head>
	<body>
		<div id="container">

		</div>
		<button type="button" class="btn1">显示</button>
		<button type="button" class="btn2">隐藏</button>
		<button type="button" class="btn3">切换</button>
		<script>
			$(function() {
      
      
				var $div = $("div");
				$(".btn1").click(function() {
      
      
					$div.show(2000);
				}) 
				$(".btn2").click(function() {
      
      
					$div.hide(2000);
				}) 
				$(".btn3").click(function() {
      
      
					$div.toggle(2000);
				}) 
			})
		</script>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_45308912/article/details/121463768