jQuery 动画填充在 Chrome 中无法正常工作

Posted 2023-05-08

【中文标题】jQuery 动画填充在 Chrome 中无法正常工作

【英文标题】：jQuery animate padding doesn't work correctly in Chrome

【发布时间】：2012-01-17 15:58:10

【问题描述】：

我有几个嵌套的 div，其中一个有填充。我尝试在该 div 上设置填充动画：

$("div").animate(paddingRight: 60);

问题在于，在 IE 和 FF 中，嵌套 div 的大小被正确调整，但在 Chrome 中却没有。看看我的例子：http://jsfiddle.net/smashko/zu6aX/。按 Remove Padding 和 Add Padding 按钮，看看在 FF 和 IE 中会发生什么。

为什么它在 Chrome 中不起作用？

编辑：

实际上，正如 Stefan 指出的那样，动画工作正常，但没有应用新的 CSS 值。

如果你在动画完成后点击检查元素，Chrome会刷新它就可以了。

那么，问题是如何让 Chrome 自动应用动画 CSS 值？

【参考方案1】：

动画效果很好，但您的 CSS 不会显示任何差异。

更新了您的示例以在 animate() 中使用回调函数。检查控制台查看动画前后的值：http://jsfiddle.net/dbDsM/

如果您改为为 paddingLeft 设置动画，您也会看到它的工作原理。

【讨论】：

谢谢斯特凡。我已经知道动画在后台运行，但我的问题应该是为什么 Chrome 不应用新的 CSS 值？奇怪的是，如果您单击“删除填充”按钮，然后右键单击元素并选择“检查元素”，它将重新绘制自身并且更改将可见。那么，如何让 Chrome 自动刷新呢？

【参考方案2】：

它在 Chrome 中对我有用（稳定）

$("#one").click(function() 
    $("#inside3").animate(
        'padding': 60
    );
);
$("#two").click(function() 
    $("#inside3").animate(
        'padding': 30
    );
);