如何在刪除以前的元素後動畫元素向上移動？

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

如何讓ROW5元素動畫的運動起來，一旦所有的removeme元素被刪除？我的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

你可以把 「刪除我」 在一個容器（如跨度）裏的和摺疊該容器。

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

類似的東西。