删除前面的元素后如何动画元素移动？

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

DEMO： http://jsfiddle.net/MwYH5/

如果您希望逐个删除 ，那么您可以像下面一样链接。

DEMO： 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});

类似的东西。