jQuery:动画后div弹回全尺寸
Posted
技术标签:
【中文标题】jQuery:动画后div弹回全尺寸【英文标题】:jQuery: div pops back to full size after animation 【发布时间】:2010-10-29 13:47:50 【问题描述】:在下面的 jQuery 示例中,我在另一个 div 中放置了一个 div。当我将内部 div 设置为宽度为 0 时,外部 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;
$('.outer').click(function()
$('.inner').animate(width: 0, paddingLeft: 0, paddingRight: 0, 'slow');
);
【问题讨论】:
在 Firefox 和 IE 中都适用于我。 【参考方案1】:看起来如果我抓住“外部”div的宽度和“内部”div的outerWidth,然后从“内部”div的outerWidth中减去“外部”div的宽度,并为“外部”宽度设置动画在将“内部”设置为 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');
);
【讨论】:
我将其报告为 jQuery 错误。 jQuery 的重点是在浏览器之间规范这些事情。 顺便说一下,在这个例子中,我可以将外部设置为 0,但在我的实际页面中,内部 div 旁边还有其他内容必须保持可见,因此将外部设置为 0实际上不是一个选项。 Nosredna,好点子。只是预感它可能也会导致更快的修复。 既然你解决了自己的问题,你应该继续接受你自己的答案。 是的,只是等待接受我自己的答案所需的 48 小时。不过谢谢你的提醒。【参考方案2】:你有没有试过在动画完成后将外框宽度设置为0?
$('.inner').animate(width: 0, paddingLeft: 0, paddingRight: 0, 'slow', function()
$('.outer').css("width", 0);
);
【讨论】:
嗯,这样的作品。它实际上创建了一个口吃,其中外部 div 在缩小到 0 之前仍会扩展为全尺寸一秒钟。【参考方案3】:对于在 Ubuntu 9.04 中使用 jQuery 1.3.2 的 Firefox 3.0.10 中的我来说,这非常有效。 可能是与页面中其他 html 元素的某种交互?
【讨论】:
我正在使用基于 webkit 的浏览器。刚刚在 Mac OS X 上尝试了 Firefox,它运行良好,所以它一定是 webkit 的问题。我发布的示例是我页面的一个极其简化的版本。无论是否存在其他元素,行为都是相同的。【参考方案4】:在我的测试中,这在 IE、FF 和 Opera 中运行良好,但会产生您在 Chrome 和 Safari 中提到的错误。
【讨论】:
是的,看起来 webkit 是罪魁祸首。希望我能找到合适的解决方法。以上是关于jQuery:动画后div弹回全尺寸的主要内容,如果未能解决你的问题,请参考以下文章