如何在jQuery hide()后让下一个元素缓慢slideUp

嘿，我明白你遇到的困扰了——用hide("slide", 1000)隐藏元素后，后面的元素瞬间跳上去，完全没有你想要的1-2秒平滑过渡效果。其实问题出在这个方法的工作逻辑上，咱们换个思路就能轻松搞定！

为什么原来的方法不行？ #

hide("slide")是jQuery UI提供的方法，它的动画仅针对当前元素本身做滑动消失的效果，但动画结束后会直接把元素设为display:none——这时候文档流会瞬间重新布局，所以后续元素就“跳”着上移了，完全没有过渡感。

正确的解决方案：用slideUp()实现平滑过渡 #

slideUp()才是专门为这个场景设计的方法，它会逐渐减小目标元素的高度（从原始高度降到0），整个过程中元素在文档流里的占位空间是慢慢缩小的，后续元素会跟着平滑地向上移动，完美匹配你的需求。

示例代码

首先是HTML结构（假设你的元素是带按钮的容器）：

<div class="item">元素1 <button class="hide-btn">隐藏</button></div>
<div class="item">元素2 <button class="hide-btn">隐藏</button></div>
<div class="item">元素3 <button class="hide-btn">隐藏</button></div>

然后是jQuery代码：

$('.hide-btn').on('click', function() {
  // 找到当前按钮所在的元素容器，执行slideUp动画
  $(this).closest('.item').slideUp(1500); // 1500毫秒=1.5秒，可调整为1000-2000之间的数值
});

动画结束后，元素会自动被设为display:none，不会再占文档流空间。

进阶：自定义动画效果 #

如果你想要更精细的控制（比如同时加上透明度变化、边距过渡），可以用animate()方法手动配置：

$('.hide-btn').on('click', function() {
  const $targetItem = $(this).closest('.item');
  $targetItem.animate({
    height: 0,
    opacity: 0,
    marginTop: 0,
    marginBottom: 0,
    paddingTop: 0,
    paddingBottom: 0
  }, 1800, function() {
    // 动画结束后彻底隐藏元素
    $(this).hide();
  });
});

这个方案能让过渡效果更自然，你可以根据自己的需求调整动画属性和时长。

内容的提问来源于stack exchange，提问作者Drew