javascript - jQuery 动画故障？

Question

Here是问题的一个 fiddle 。我有一个带有 display: inline-block 的 span，它包含另一个 span，我正在慢慢隐藏它。最后，容器 span 瞬间“跳回”其初始位置。

这是错误还是预期的行为？

Answer 1

问题是当动画(计算)宽度低于 1px 时，浏览器(至少我的 chrome)不会渲染那个部分，并且 #text 元素会恢复到原来的状态宽度。如果您将动画时间增加到非常长的时间(例如 25 秒)并在控制台中观察 css 值，您可以看到此行为。

如果您尝试这样做:

$('#text').delay(1000).animate({
    width: 1,
    height: 1,
    opacity: 0
}, 5000, function () {
  $(this).hide();
});

您将获得几乎相同的动画而无需捕捉。