删除 div 时添加效果答案

【问题标题】：Add effect when a div has been removed删除 div 时添加效果
【发布时间】：2017-12-31 20:21:27
【问题描述】：

当我remove 一个时，我想为其他div 的“向上移动”添加效果。这里的html：

<ul id="fds">
  <li>
    <h3>one</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>two</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>three</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>four</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
</ul>

这里是 JavaScript：

$("#fds").delegate(".remove", 'click', function() {
    var $li = $(this).closest("li");
  $li.fadeOut(300, function() {
    $li.remove();
  })
})

Here 一个 JS 来测试这个。

【问题讨论】：

@Andreas “我想在删除一个 div 时为其他 div 的“上移”添加效果。”。
请将正确答案标记为已接受。

标签： javascript jquery effect

【解决方案1】：

将上边距设置为减去高度以提供更好的用户体验。

$("#fds").delegate(".remove", 'click', function() {
    var $li = $(this).closest("li");
    
  $li.css({opacity: 0}).animate({marginTop: -1 * $li.height()}, 400, function() {$li.remove();})
})

li
{
border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="fds">
  <li>
    <h3>one</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>two</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>three</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>four</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
</ul>

【讨论】：

【解决方案2】：

这样在动画完成后元素实际上会被隐藏。

$li.animate({ 
   height: 0, 
   opacity: 0,
}, 'slow', function(){
   $(this).hide();
});

https://jsfiddle.net/L0prkrct/19/

【讨论】：

删除padding: 0 运动不太流畅。
你是对的。也许 Martijn 会将答案还原为原始答案。在此之前，jsfiddle 示例正在使用完整的代码。

【解决方案3】：

我认为像 this 这样的东西很接近你想要的。

只需在淡出之前添加$li.animate({ height: 'toggle', opacity: 'toggle' }, 'slow');。

这里你的 JSfiddle 更新了。 https://jsfiddle.net/L0prkrct/16/

【讨论】：