设置动画<；李>；jQuery中的删除

我正在使用jQuery添加和删除

元素，这些元素以以下样式水平显示：

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

例如，如果我在一个

元素中添加了四个
，然后我决定删除第二个元素，在删除后，右边的另外两个
元素应该立即移向左边

我想做的是设置这个行为的动画，剩余的
元素会轻轻地向左移动。
不确定如何进行删除，所以我只是将其绑定到一个单击事件。事件将更改，但您可以看到动画。查看jQuery函数

<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();
        }
    });
});


11111
11111
11111

$（'#li2'）。单击（函数（）{
$（'#li2'）。设置动画({
宽度：“0px”
}, {
持续时间：1000，
完成：函数（）{
$（this.remove（）；
}
});
});
首先要做的事。如果我们考虑元素的CSS结构。至于浮动左属性，您的lis将遵循浏览器重新对齐算法

因此，为了控制它们的堆叠方式，您需要将它们定位为绝对值

很抱歉，我不打算为此编写代码，这次是在晚上，但我将分享一个算法思想

然后从这篇文章你可以学习如何检测一个被删除的元素

之后，如果删除了某些内容，那么在堆栈中检测其索引应该很容易

然后，您需要一个函数（假设所有框大小相等）来更新每个元素的左位置（css left），除非其索引确定它位于队列的开始或结束位置，在这种情况下，它的css top位置也需要更新

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

如果其容器宽度为400 px，则每行应包含4个箱子。因此，如果新框添加的宽度使总和大于该行中已存在的框的总和，则该行中的第一个索引位于开始处，并相应地对应于队列中的最后一个元素。
我最近不得不这样做。以下是我为删除的元素执行的步骤：

将元素的不透明度设置为0

将宽度、边距和填充设置为0

移除该元素

我使用的代码有点像这样：

  $(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();
  });