jQuery的动画填充到零

我有下面的代码片段徘徊时切换填充（见例如here）：jQuery的动画填充到零

<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。有任何解决这个问题的方法吗？

来源

2010-11-04 Kevin Sylvestre

不知道是怎么回事，但不会动画内部元素的'margin'属性呢？ – 2010-11-04 10:05:57

@Freek，如果外部div的尺寸没有定义，则不是。它会将内部推入左侧/顶部，但它会破坏外侧，因为由于定义的尺寸外部无法展开。 – 2010-11-04 10:13:26

@Gaby点采取:) – 2010-11-04 10:16:52

绝对动画的bug在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。

来源

2010-11-04 10:04:52

谢谢尼克！始终感谢您非常确切的答案。此外，代码演示很酷的工具！ – 2010-11-04 10:10:25

这个错误存在，它不会在动画后以某种方式存储填充。即使完全删除了mouseleave，当您重新输入div时也会出现问题。动画重新开始.. – 2010-11-04 10:11:30

@Gaby - 我认为这是由鼠标位置移动引起的，不知道它为什么会被删除，但是我会在这里得到一些睡眠或咖啡，然后看看这里正在发生 – 2010-11-04 10:13:59

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

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

我会进一步调查，并更新这个帖子。

来源

2010-11-04 10:03:29 jAndy

谢谢安迪。我很欣赏确认它是一个错误！ – 2010-11-04 10:12:19

另一种解决方案是使用cssHook。 Brandon Aarons jquery-cssHooks浮现在脑海中（在这种情况下marginpadding.js的padding钩）

You can test it here

来源

2010-11-04 12:19:51 jitter

我才意识到jQuery是不是反应非常好，以连字符“ - ”动漫之内，但你通过得到的骑得到同样的结果连字符和大写后的第一个字母。所以你会有这样的事情：

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

}, slow);

来源

2012-09-16 18:21:38 iMad

jQuery的动画填充到零

回答

相关问题