Question

我有以下代码片段在悬停时切换填充（参见示例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。有什么方法可以解决这个问题吗？

Answer 1

绝对是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

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挂钩）

You can test it here

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

jQuery Animate填充到零

4 个答案: