jQuery hide()方法
栏目：
jquery
发布时间：2024-12-24
hide() 方法是 jQuery 提供的一个用于隐藏 HTML 元素的动画方法。
基本用法
hide() 方法默认会在 400 毫秒内以标准效果隐藏匹配的元素。你可以通过传递参数来自定义动画的速度和效果。
$(selector).hide(speed, callback);
selector：选择你想要隐藏的元素，例如$("#myDiv")或$(".myClass")。speed（可选）：动画的速度。可以是以下三种值之一："slow"：600 毫秒。"fast"：200 毫秒。- 数字（毫秒）：例如
400表示 400 毫秒。
callback（可选）：动画完成后执行的函数。
示例
- 基本隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery hide() 方法</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("#myDiv").hide();
});
});
</script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<button id="hideButton">隐藏 Div</button>
<div id="myDiv"></div>
</body>
</html>
在这个示例中，当点击按钮时，div 元素会被隐藏起来。
- 自定义速度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery hide() 方法 - 自定义速度</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("#myDiv").hide(1000); // 1 秒内隐藏
});
});
</script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<button id="hideButton">隐藏 Div</button>
<div id="myDiv"></div>
</body>
</html>
在这个示例中，div 元素会在 1 秒内逐渐消失。
- 使用回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery hide() 方法 - 回调函数</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("#myDiv").hide("slow", function() {
alert("动画完成！");
});
});
});
</script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<button id="hideButton">隐藏 Div</button>
<div id="myDiv"></div>
</body>
</html>
在这个示例中，当 div 元素隐藏完成后，会弹出一个提示框显示“动画完成！”。
注意事项
hide()方法会改变元素的display属性，将其设置为none，从而隐藏元素。- 如果元素已经是
display: none;状态，hide()方法不会对其产生任何影响。 - 你可以结合
show()和hide()方法来实现元素的显示和隐藏切换。例如，使用toggle()方法。
总结
hide() 方法是 jQuery 提供的一个简单但强大的工具，用于隐藏 HTML 元素。通过调整速度和回调函数，你可以轻松控制动画的行为，提升用户体验。希望这个教程能帮助你更好地理解和使用 hide() 方法！
本文地址：https://www.tides.cn/p_jquery-hide