jQuery动画故障？

Question

Here是问题的一小部分。我有span display: inline-block，其中包含另一个span，我正在慢慢隐藏。最后，容器span暂时“跳回”到其初始位置。

这是一个错误，还是预期的行为？

Answer 1

问题是当动画（计算的）宽度低于1px时，浏览器（至少我的chrome）将不会渲染该分数，并且#text元素会快速恢复到原始宽度。 如果将动画时间增加到非常大的值（例如25秒）并在控制台中观察css值，则可以查看此行为。

如果您尝试这样做：

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

如果没有捕捉，你将获得几乎相同的动画。

Answer 2

不确定你的确想做什么，但试试这个：

<div class='container'>
  <span>Text 1</span><br/>
  <span class='big'>Much more text</span>
</div>

并可能为容器添加宽度

.container {
  border: solid 3px blue;
  width:200px;
}