文本跨度宽度的不均匀，不平滑和不完整的动画

Question

我在span中添加了一些文本到另一个元素。然后我使用线性缓动将其宽度设置为0。但这不是我预期的结果。它有点滞后，只是关闭一半。 here's a video of what happens 这是我使用的代码

$('#' + id).animate({width: '10px'}, 1500, "linear", function() { $('#' + id).remove(); });

我该如何解决这个问题？

编辑：我用以下代码实现了我想要的效果。由于间隔很高，我不认为它会造成任何性能问题，不是吗？

setTimeout(function() { decrementWidth(id); }, 400);

function decrementWidth(id)
{
    var width = $('#' + id).width();
    var dec = 20;
    if(width > dec)
    {
        width -= dec;
        $('#' + id).width(width);
        setTimeout(function() { decrementWidth(id); }, 100);
    }
    else
    {
         $('#' + id).remove();
   }
}

Answer 1

哦，男孩！这是因为我在span元素上设置了过渡集;所以通过设置以下内联样式来修复它：

transition: none;