jquery - 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);