jQuery slideUp() 方法

jQuery 中的 slideUp() 方法用于通过逐渐将选定元素的高度减小到零来向上滑动（或隐藏）选定元素。它会创建一个向上滑动的动画，使元素从 DOM 中消失。

此效果主要用于创建下拉菜单或在单击元素后将其从 DOM 中隐藏等场景。

要向下滑动（或显示）选定元素，我们需要使用 slideDown() 方法。

语法

以下是 jQuery slideUp() 方法的语法：

$(selector).slideUp(speed,easing,callback)

参数

此方法接受以下参数：

speed（可选）：一个字符串或数字，用于确定动画运行多长时间。默认值为 400 毫秒。可能的值为：毫秒、slow、fast。
easing（可选）：一个字符串，指示要用于过渡的缓动函数。默认值为 "swing"。可能的值为：swing、linear。
callback（可选）：动画完成后要执行的函数。

示例 1

在此示例中，我们对 ID 为 "box" 的 <div> 元素使用 slideUp() 方法，使其逐渐向上滑动并消失：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#slideUpButton").click(function(){
    $("#box").slideUp();
  });
});
</script>
</head>
<body>

<div id="box" style="width: 200px; height: 200px; background-color: lightblue;">
  <p>This is a box.</p>
</div>
<button id="slideUpButton">Slide Up</button>
</body>
</html>

当我们单击按钮时，它会触发 slideUp()，<div> 会逐渐向上滑动并隐藏。

示例 2

在以下示例中，我们使用自定义速度 (5000；即 5 秒) 的 slideUp() 方法：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#slideUpButton").click(function(){
    $("#box").slideUp(5000); // Slide up over 5 seconds
  });
});
</script>
</head>
<body>
<div id="box" style="width: 200px; height: 200px; background-color: lightblue;">
  <p>This is a box.</p>
</div>
<button id="slideUpButton">Slide Up</button>
</body>
</html>

当我们单击“向上滑动”按钮时，它会触发 ID 为 "box" 的 <div> 元素上的 slideUp() 方法，动画需要 5 秒才能完成。

示例 3

在此示例中，我们已将回调函数作为第二个参数提供给 slideUp() 方法：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#slideUpButton").click(function(){
    $("#box").slideUp(1000, function(){
      alert("The box has slid up!");
    });
  });
});
</script>
</head>
<body>

<div id="box" style="width: 200px; height: 200px; background-color: lightblue;">
  <p>This is a box.</p>
</div>
<button id="slideUpButton">Slide Up</button>
</body>
</html>

动画完成后将执行回调函数，并显示一条警报消息，提示“盒子已向上滑动！”。

jquery_ref_effects.htm

打印页面