javascript - 删除以前的元素后如何动画元素向上移动？

Question

所以我有这个示例代码：

<ul>
  <li class="class1">row1</li>
  <li class="removeme">row2</li>
  <li class="removeme">row3</li>
  <li class="removeme">row4</li>
  <li class="class1">row5</li>
</ul>

//Javascript
$('.removeme').remove();

删除所有 removeme 元素后，如何使 row5 元素向上移动？我的 css3 过渡也设置好了。

Answer 1

我不确定你在 css3 中设置了什么，但下面是你可以用 jQuery 做什么。

$('.removeme').animate({height: 0}, 2000, function () {
    $(this).remove();
});

演示：http: //jsfiddle.net/MwYH5/

如果您希望将其一一删除，则可以像下面这样链接。

演示：http: //jsfiddle.net/MwYH5/1/

(function removeNext(jq) {
    jq.eq(0).animate({height: 0}, 1000, function () {
        $(this).remove();
        (jq = jq.slice(1)).length && removeNext(jq);            
    });
})($('.removeme'))

参考： http: //paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/#comment-24910

Answer 2

您可以将“删除我”的 li 放在一个容器中（如跨度）并折叠该容器。

$(container).fadeTo(200,0).animate({height: 0});

类似的东西。