jQuery动画填充为零答案

【问题标题】：jQuery Animate Padding to ZerojQuery动画填充为零
【发布时间】：2011-05-04 23:22:10
【问题描述】：

我有以下 sn-p 在悬停时切换填充（参见示例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>

我们的目标是让内边距动画进出，但是目前没有动画出现。我做了一些测试，如果我将离开填充更改为 10 像素（从 0 像素），它会运行动画，但从零开始并向外动画。我正在运行 jQuery 1.4.3。有什么办法解决这个问题？

【问题讨论】：

不确定发生了什么，但不会为内部元素设置 margin 属性的动画？
@Freek，如果外部 div 定义了尺寸，则不会。它会将内部向左/顶部推，但它会在外部外部中断，因为外部由于定义的尺寸而无法扩展..
这似乎被报道了。你可以在这里关注：bugs.jquery.com/ticket/7399

标签： jquery jquery-1.4

【解决方案1】：

我刚刚意识到 jquery 对动画中的连字符“-”的反应不是很好，但是通过连字符的搭接并将其后的第一个字母大写，您会得到相同的结果。所以你会有这样的东西：

    $("#inner").mouseleave(function () {
       $("#outer").animate({
     paddingTop : 0,
         paddingRight : 0,
         paddingBottom : 0,
         paddingLeft : 0,
         borderLeftWidth: 0,
         borderTopWidth: 0,
         borderRightWidth: 0,
         borderBottomWidth: 0,

 }, slow);

【讨论】：

【解决方案2】：

另一种解决方案是使用 cssHook。想到Brandon Aarons jquery-cssHooks（在这种情况下，marginpadding.js 中的padding 挂钩）

You can test it here

【讨论】：

【解决方案3】：

绝对是 1.4.3 中的动画错误，现在您可以通过像这样为各个属性设置动画来解决此问题：

$("#inner").mouseleave(function () {
  $("#outer").animate({ 
    'padding-top' : 0,
    'padding-right' : 0,
    'padding-bottom' : 0,
    'padding-left' : 0,
  }, "slow");
});

You can test it out here.

【讨论】：

谢谢尼克！始终感谢您非常准确的答案。另外，很酷的代码演示工具！
这个bug的存在是因为它不会以某种方式在动画之后存储填充。即使你完全移除了mouseleave，当你重新输入div时也会出现问题。动画重新开始..
@Gaby - 我认为这是由于鼠标位置移动到其中造成的，但不知道为什么它会被移除……我要在这里睡一觉或喝杯咖啡，然后看看在哪里这正在发生
是的，但它不应该重置 mouseenter 上的属性.. 请求动画使用当前属性值.. (所以它没有被存储或被重置。两者都错了..)
@Gaby - 是的，同意，似乎问题肯定出在 css 重写中，未正确检索的值解释了所有行为，我会在为这一天做好准备后缩小范围。

【解决方案4】：

看起来像 1.4.3 中的一个错误（重写的 css 部分）。 1.4.2 工作正常：

http://www.jsfiddle.net/YjC6y/44/

我会进一步调查并更新这篇文章。

【讨论】：

谢谢安迪。感谢您确认这是一个错误！