使用jQuery实现<li>删除的动画效果

Question

我正在使用jQuery添加和删除水平显示的<li>元素，其样式如下：

#my_ul {
    list-style: none;
}
#my_ul li {
    float: left;
    margin: 0px 15px;
}

例如，如果我向一个 <ul> 元素添加了四个 <li>，然后我决定删除第二个，在它被删除后，右侧的另外两个 <li> 元素应立即向左移动。

我想要做的是通过动画来实现这种行为，使剩余的 <li> 元素缓慢地向左移动。

- Mark

Answer 1

不确定您是如何进行删除操作的，因此我只是将其绑定到了点击事件上。事件会发生变化，但您可以看到动画效果。请查看jQuery函数animate。

<ul id="my_ul">
    <li>11111</li>
    <li id="li2">11111</li>
    <li>11111</li>
</ul>


$('#li2').click(function() {
    $('#li2').animate({
        width: '0px'
    }, {
        duration: 1000,
        complete: function() {
            $(this).remove();
        }
    });
});

- Dustin Laine

Answer 2

我最近必须做类似的事情。以下是我删除元素所遵循的步骤：

1. 将元素的不透明度动画设置为0

2. 将宽度、边距和填充动画设置为0

3. 删除该元素

我使用了类似以下代码的代码：

  $(this).animate({opacity: 0}, 500);
  $(this).animate({width: 0, "padding-left": 0, "padding-right": 0, "margin-left": 0, "margin-right": 0}, 500, function() {
    $(this).remove();
  });

- Venkat D.

Answer 3

首先，如果我们考虑元素的CSS结构，并且涉及到浮动左属性，您的li将遵循浏览器重新对齐算法。

因此，为了控制它们如何堆叠，您需要将它们定位为绝对位置。

抱歉，我现在不打算编写代码，但是会分享一些算法思路。

然后从这篇文章中，您可以学习如何检测已删除的元素。检测已删除的元素 之后，如果某个东西被删除了，检测其在堆栈中的索引应该很容易。

然后，您需要一个函数（假设所有框的大小都相同），来更新每个元素的左位置（CSS左），除非它的索引确定它在队列的开头或末尾，在这种情况下，它的CSS顶部位置也需要更新。

区分元素是否存在于队列的开头或末尾应该使用其索引。

以这种方式，如果其容器的宽度例如为400像素，则应该在每一行中包含4个框。因此，如果新框添加了一个宽度，使得行中已经存在的框的总和超过总和，则该行中的第一个索引位于开头，相应地，队列中的最后一个元素位于末尾。

- makeitmorehuman