jQuery 动画填充为零

Question

我有以下代码片段，可以在悬停时切换填充（请参见示例此处）

<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。有办法解决这个问题吗？

Answer 1

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

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

您可以对其进行测试在这里。

Answer 2

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

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

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

Answer 3

另一种解决方案是使用 cssHook。 Brandon Aarons jquery-cssHooks 浮现在脑海中（在本例中是 padding 挂钩 marginpadding.js)

您可以在这里测试

Answer 4

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

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

 }, slow);