javascript - Jquery动画高度或宽度导致 float 元素跳跃

Question

我有一堆盒子漂浮在一个容器里。它们的尺寸非常合适，就像空间中的方 block 一样。 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 开始动画。这会导致我的 float 元素快速向下或左右跳跃，具体取决于宽度和/或高度是否具有小数值。

我的 px 值 block 是 252px 宽度和 154.8px 高度但是当动画开始时:

如何在不更改框的 50% 宽度的情况下解决此问题。动画功能是否包含向下舍入的任何设置？

Answer 1

我通过从起始高度和宽度中删除 1px 找到了解决方案

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