jquery動畫高度或寬度導致浮動元素跳轉

Question

我有一堆箱子左側浮在容器內。它們的大小完全適合像空間內的塊。 2列各佔50％。

<div style="padding:10px; overflow:hidden;"> 
    <div style="display:inline-block; float:left; width:50%;">block1</div> 
    <div style="display:inline-block; float:left; width:50%;">block2</div> 
    <div style="display:inline-block; float:left; width:50%;">block3</div> 
    <div style="display:inline-block; float:left; width:50%;">block4</div> 
</div> 

然後我有一個基於jQuery腳本動畫去除一盒如下

function remove(element){ 
    element.animate({width:0,height:0},2000,function(){ 
    element.remove() 
})} 

我的問題就在該點的動畫開始在那裏發生。我相信這是動畫創建的初始寬度和/或高度值只比實際值稍大一些。有時px值中的高度和寬度是小數點，但動畫在初始化時將其舍入。

例如，我測試了動畫時間超過200000，它清楚地表明動畫過程四捨五入px值，如154.8px - > 155px，並開始在155px而不是154.8px的動畫。這會導致我的浮動元素快速跳下或左右擺動，具體取決於寬度和/或高度是否有十進制值。

我在像素值塊是252px寬度和高度154.8px但是當動畫開始：

我怎樣才能解決這個問題，在不改變我的箱子的50％的寬度。動畫功能是否包含任何設置來縮小起點？

Answer 1

我找到了解決這個由起始高度和寬度，像這樣

function remove(element){ 
    startHeight=element.height()-1+"px" 
    startWidth=element.width()-1+"px" 
    element.css({width:startWidth,height:startHeight}).animate({width:0,height:0},200,function(){ 
    element.remove() 
})}