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

【问题标题】：jQuery animate padding doesn't work correctly in ChromejQuery 动画填充在 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 值？

【问题讨论】：

标签： jquery google-chrome jquery-animate

【解决方案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
    });
});

【讨论】：