Question

我正在使用jQuery添加和删除<li>个元素，这些元素使用以下样式水平显示：

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

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

我想要做的是动画这种行为，剩下的<li>元素轻轻向左移动。

Answer 1

不确定你是如何进行删除的，所以我只是将其绑定到click事件。该事件将发生变化，但您可以看到动画。查看animate 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();
        }
    });
});

Answer 2

首先要做的事情。如果我们考虑元素的css结构。关于浮动左侧属性，您的lis将遵循浏览器重新排列算法。

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

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

然后从这篇文章中你可以学习如何检测被删除的元素。 Detect removed elem

之后如果删除某些东西，检测堆栈中的索引应该很容易。

然后你需要一个函数（假设所有的盒子大小相等）来更新每个元素的左边位置（css left），除非它的索引确定它在队列的开头或结尾，在这种情况下它的css顶部职位也需要更新。

区分元素，无论它是否存在于队列的开头或结尾，都应该使用它的索引。

如果其容器宽度例如为400 px，则每行应包含4个盒子。因此，如果新框添加的宽度使得总和超过该行中已存在的框的总和超过总和，则该行中的第一个索引位于开头，并且相应地适用于队列中的最后一个元素

Answer 3

我最近不得不这样做。以下是我为删除元素执行的步骤：

将元素的不透明度设置为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();
  });

动画<j>中的<li>删除</li>

3 个答案: