jQuery显示隐藏对比

原创已于 2025-06-27 15:02:31 修改 · 415 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-13 16:03:24 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery显示隐藏对比</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 200px;
height: 100px;
margin: 10px;
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.controls {
margin: 20px;
}
button {
margin: 5px;
padding: 8px 15px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>jQuery控制元素显示与隐藏的三种方式对比</h1>

<div class="controls">
<button id="showAll">显示所有</button>
<button id="hideAll">隐藏所有</button>
</div>

<div class="box" id="box1">方式1: show()/hide()</div>
<div class="box" id="box2">方式2: fadeIn()/fadeOut()</div>
<div class="box" id="box3">方式3: slideDown()/slideUp()</div>

<div class="controls">
<button id="toggle1">切换方式1</button>
<button id="toggle2">切换方式2</button>
<button id="toggle3">切换方式3</button>
</div>


<script>
$(document).ready(function() {
// 方式1: show()/hide() - 直接显示/隐藏元素
$("#toggle1").click(function() {
$("#box1").toggle();
});

// 方式2: fadeIn()/fadeOut() - 淡入淡出效果
$("#toggle2").click(function() {
if ($("#box2").is(":visible")) {
$("#box2").fadeOut(500);
} else {
$("#box2").fadeIn(500);
}
});

// 方式3: slideDown()/slideUp() - 滑动效果
$("#toggle3").click(function() {
if ($("#box3").is(":visible")) {
$("#box3").slideUp(500);
} else {
$("#box3").slideDown(500);
}
});

// 控制所有元素
$("#showAll").click(function() {
$("#box1").show();
$("#box2").fadeIn(500);
$("#box3").slideDown(500);
});

$("#hideAll").click(function() {
$("#box1").hide();
$("#box2").fadeOut(500);
$("#box3").slideUp(500);
});
});
</script>
</body>
</html>