jQuery 03 效果：隐藏与显示

最新推荐文章于 2022-10-03 14:24:45 发布

今天我牙疼

最新推荐文章于 2022-10-03 14:24:45 发布

阅读量190

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_40924514/article/details/109394228

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何使用jQuery实现动态控制元素的显示与隐藏，包括添加速度参数并设置回调函数。通过实例演示了`show(speed,back)`和`hide(speed,back)`函数，以及如何用`toggle()`函数简化操作。

摘要由CSDN通过智能技术生成

函数：show(speed, back)、hide(speed, back)

speed: 显示或隐藏的速度，单位：毫秒
back: 显示或隐藏后要执行的函数

//简单实现
<script>
	$(document).ready(function(){
		$("#hide").click(function(){
			$("p").hide();
		});
		$("#show").click(function(){
			$("p").show();
		});
	});	
</script>
</head>
<body>
<p>效果展示。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>

函数：toggle()

//使用一个函数实现
</script>

<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").toggle();
	});
});	
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>效果展示</p>

//添加速度，以及返回函数
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
	$(".hide").click(function(){
		$("div").hide(1000,"linear",function(){
			alert("返回方法已调用！");
		});
	});
});	
</script>
</head>
<body>
	
<div>隐藏及设置回调函数</div>
<button class="hide">隐藏</button>