jQuery slideDown()方法
栏目：
jquery
发布时间：2024-12-24
jQuery 的 slideDown() 方法是另一个用于创建滑动动画效果的函数，与 slideUp() 相反，它会使匹配的元素以滑动的方式向下展开，直到其达到原始高度或指定的新高度。这个动画效果同样常用于创建折叠面板、显示隐藏内容等交互效果。
基本用法
slideDown() 方法的基本语法如下：
$(selector).slideDown(speed, callback);
selector：一个 jQuery 选择器，用于选择你想要应用滑动展开效果的元素。speed（可选）：动画的速度。可以是字符串"slow"（600 毫秒）、"fast"（200 毫秒）或数字（表示毫秒数）。如果省略此参数，则动画会立即完成（但实际效果仍然是逐渐展开的，只是非常快）。callback（可选）：一个在动画完成后执行的函数。
示例
- 基本滑动展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery slideDown() 方法</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#showButton").click(function(){
$("#myDiv").slideDown();
});
});
</script>
<style>
#myDiv {
width: 200px;
height: 100px;
background-color: lightgray;
display: none; /* 初始状态为隐藏 */
margin-bottom: 20px;
}
</style>
</head>
<body>
<button id="showButton">向下滑动展开 Div</button>
<div id="myDiv">这是一个要展开的 Div</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 slideDown() 方法 - 带速度</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#showButton").click(function(){
$("#myDiv").slideDown("slow"); // 使用慢速动画
});
});
</script>
<style>
#myDiv {
width: 200px;
height: 150px;
background-color: lightblue;
display: none; /* 初始状态为隐藏 */
}
</style>
</head>
<body>
<button id="showButton">向下滑动展开 Div（带速度）</button>
<div id="myDiv">这是一个带有滑动展开动画的 Div</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 slideDown() 方法 - 使用回调函数</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#showButton").click(function(){
$("#myDiv").slideDown("fast", function() {
alert("Div 已向下滑动展开！");
});
});
});
</script>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: lightcoral;
display: none; /* 初始状态为隐藏 */
}
</style>
</head>
<body>
<button id="showButton">向下滑动展开 Div（带回调）</button>
<div id="myDiv">点击按钮，我将向下滑动展开</div>
</body>
</html>
在这个示例中，当 div 元素的滑动展开动画完成后，会弹出一个提示框。
注意事项
slideDown()方法只会改变元素的高度，而不会改变其display属性。但是，在动画开始之前，jQuery 可能会将display属性设置为block或inline-block（取决于元素的原始display值），以便元素能够正确展开。动画完成后，display属性将保持这个值。- 如果元素被其他 CSS 规则（如
visibility: hidden;或opacity: 0;并且display不是none）隐藏，slideDown()可能无法正常工作，因为它依赖于高度变化来创建动画效果。 - 你可以结合其他 jQuery 动画方法（如
slideUp()、fadeToggle()）来创建更复杂的动画效果。 - 如果元素在调用
slideDown()之前没有被隐藏（即display不是none），那么该方法可能不会按预期工作，因为元素已经可见，并且没有高度变化可以动画化。在这种情况下，你可以使用slideToggle()方法，它会在元素已经展开时调用slideUp()，在元素已经隐藏时调用slideDown()。
总结
slideDown() 方法是 jQuery 中用于创建滑动展开动画效果的一个非常有用的工具。通过简单地调用这个方法，你可以使匹配的元素以平滑的方式向下展开。无论是基本的滑动展开、带速度的滑动展开还是使用回调函数的复杂动画效果，slideDown() 方法都能很好地满足你的需求。
本文地址：https://www.tides.cn/p_jquery-slide-down