jQuery：div在动画后弹回全尺寸

在下面的jQuery示例中，我有一个div在另一个div内。当我将内部div的动画设置为0的宽度时，外部div（具有绝对定位）随着宽度减小。jQuery：div在动画后弹回全尺寸

这是所希望的。

问题在于动画完成后，外部div会弹回原始大小。这是预期的吗？我怎样才能防止这种情况发生？

谢谢！

例

HTML：

<div class="outer"><div class="inner">innerContent</div></div>

CSS：

div.outer { 
    position: absolute; 
    padding: 10px; 
    background: purple; 
} 

div.inner { 
    position: relative; 
    padding-left: 5px; 
    padding-right: 5px; 
    background: orange; 
    clip: auto; overflow: hidden; 
}

的javascript：

$('.outer').click(function() { 
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow'); 
});

来源

2009-05-28 user113716

适用于Firefox和IE。 – kgiannakakis 2009-05-28 13:08:41

看起来像是如果我抓住'outer'div的宽度和'inner'div的outerWidth，然后从'inner'div的outerWidth减去'outer'div的宽度，并为'outer'宽度与结果同时动画的'内'为0，它的作品。

对这是否应该是针对jquery或webkit的错误修复请求有任何意见或两者都有。

$('.outer').click(function() { 
    var innerWidth = $('.inner').outerWidth(); 
    var outerWidth = $('.outer').width(); 
    var theWidth = outerWidth - innerWidth; 
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow'); 
    $('.outer').animate({width: theWidth}, 'slow'); 
});

来源

2009-05-28 13:46:21 user113716

我会报告它作为一个jQuery的错误。 jQuery的重点是在浏览器之间规范化这些东西。 – Nosredna 2009-05-28 13:49:27

顺便说一句，在这个例子中，我可以只将外部动画设置为0，但在我的实际页面中，内部div旁边的其他内容必须保持可见，所以将外部减少为0实际上并不是一种选择。 – user113716 2009-05-28 13:50:01

诺斯瑞德娜，好点。只是预感到它可能会导致更快的修复。 – user113716 2009-05-28 13:51:19

您是否尝试过的外箱宽度设置为0动画完成后？

$('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow', function() { 
    $('.outer').css("width", 0); 
});

来源

2009-05-28 13:15:32 peirix

嗯，这种作品。它实际上创建了一个口吃，其中外部div仍然扩展到全尺寸一秒，然后它减少到0. – user113716 2009-05-28 13:25:39

对于我在Firefox 3.0.10中使用jQuery 1.3.2在Ubuntu 9.04中，这完美的工作。可能是某种与页面中其他html元素的交互？

来源

2009-05-28 13:18:44 Keeper

我正在使用基于webkit的浏览器。刚刚在Mac OS X上试用过Firefox，它完美地工作，所以它一定是一个webkit的问题。我发布的例子是我的页面的一个非常简化的版本。无论是否存在其他元素，行为都是相同的。 – user113716 2009-05-28 13:30:19

在我的测试中，这在IE，FF和Opera中可以正常工作，但会产生您在Chrome和Safari中提到的错误。

来源

2009-05-28 13:23:09 ichiban

是的，看起来像webkit是罪魁祸首。希望我能找到一个合适的解决方法。 – user113716 2009-05-28 13:32:16

jQuery：div在动画后弹回全尺寸

回答

相关问题