Question

我有几个嵌套的div，其中一个有填充。我尝试使用：

为该div上的填充设置动画

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

问题是在IE和FF中，嵌套的div正在调整大小，但在Chrome中没有。看看我的例子：http://jsfiddle.net/smashko/zu6aX/。按删除填充和添加填充按钮以查看FF和IE中发生的情况。

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

编辑：

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

如果在动画完成后单击“检查元素”，Chrome将刷新它并且没有问题。

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

Answer 1

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

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

如果你为paddingLeft设置动画，你也会看到它正常工作。

Answer 2

它适用于Chrome（稳定版）

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

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

2 个答案: