jQuery 动画填充为零
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4095475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Animate Padding to Zero
提问by Kevin Sylvestre
I have the following snippet that toggles padding when hovering (see example here):
我有以下代码段可以在悬停时切换填充（请参见此处的示例）：
<div id="outer"><div id="inner"></div></div>
<script>
$("#inner").mouseenter(function () {
$("#outer").animate({ 'padding' : '20px' }, "slow");
});
$("#inner").mouseleave(function () {
$("#outer").animate({ 'padding' : '0px' }, "slow");
});
</script>
The goal is to have the padding animate both in and out, however currently no animation appears for animating out. I did some tests, and if I change the leave padding to 10 pixels (from 0 pixels) it runs an animation, but starts at zero and animates outwards. I'm running jQuery 1.4.3. Any way to fix this?
目标是让内边距和外边距动画，但目前没有动画出现。我做了一些测试，如果我将离开填充更改为 10 像素（从 0 像素），它会运行一个动画，但从零开始并向外动画。我正在运行 jQuery 1.4.3。有任何解决这个问题的方法吗？
回答by Nick Craver
Definitely an animation bug in 1.4.3, for now you can work-around by animating the individual properties like this:
绝对是 1.4.3 中的动画错误，现在您可以通过为各个属性设置动画来解决这个问题：
$("#inner").mouseleave(function () {
$("#outer").animate({
'padding-top' : 0,
'padding-right' : 0,
'padding-bottom' : 0,
'padding-left' : 0,
}, "slow");
});
回答by jAndy
Looks like a bug in 1.4.3(rewritten css part). 1.4.2works fine:
看起来像1.4.3（重写的 css 部分）中的一个错误。1.4.2工作正常：
http://www.jsfiddle.net/YjC6y/44/
http://www.jsfiddle.net/YjC6y/44/
I will investigate it further and update this post.
我会进一步调查并更新这篇文章。
回答by jitter
Another solution would be to use a cssHook. Brandon Aarons jquery-cssHookscome to mind (in this case the paddinghook in marginpadding.js)
另一种解决方案是使用 cssHook。Brandon Aarons想到了jquery-cssHooks（在这种情况下是 中的padding钩子marginpadding.js）
回答by Adam Boostani
I just realized jquery is not reacting very well to hyphens "-" within animation but you get the same result by getting ride of the hyphen and capitalizing the first letter after. So for you will have something like this:
我刚刚意识到 jquery 对动画中的连字符“-”的反应不是很好，但是通过使用连字符并将其后的第一个字母大写，您可以获得相同的结果。所以你会有这样的事情：
$("#inner").mouseleave(function () {
$("#outer").animate({
paddingTop : 0,
paddingRight : 0,
paddingBottom : 0,
paddingLeft : 0,
borderLeftWidth: 0,
borderTopWidth: 0,
borderRightWidth: 0,
borderBottomWidth: 0,
}, slow);
