JQuery IE抖动幻灯片动画
JQuery IE抖动幻灯片动画
提问于 2009-05-26 10:16:38
我有以下代码来动画显示/隐藏div。
$(".headerClosed, .headerOpen").live("click", function(){
$(this).next().slideToggle("slow");
}这将显示和隐藏具有以下标记的div：
<div class="details">
<p>Date</p>
<p>Text</p>
</div>问题出在IE(惊喜，惊喜！)当div向下滑动时，动画是平滑的，直到结束时才发生抖动。我知道这是由于div的填充/边距设置造成的。
如果我使用a而不是a，那么动画是平滑的，但只要我向中添加任何填充或边距，动画就会跳跃。如果填充和边距设置使一个漂亮的div变得倾斜，你怎么能滑下一个有间距的漂亮的div？
回答 3
Stack Overflow用户
回答已采纳
发布于 2009-05-26 10:27:03
将div包装在另一个div中。将填充/边距添加到内部div，并调用外部div上的动画。
<div class="details">
<div class="hasMargins">
<p>Date</p>
<p>Text</p>
</div>
</div>Stack Overflow用户
发布于 2009-12-23 18:25:22
你的利润可能正在缩水。当您对滑动的元素应用float、overflow: auto或overflow: hidden时，这种情况应该不会再发生。
jQuery在动画过程中设置overflow: hidden，因此边距不会折叠。动画完成后，此属性将被移除。<p>的边距再次崩溃，因此你在结尾会有一个小的跳跃。
Stack Overflow用户
发布于 2009-05-26 10:56:35
我遇到了同样的问题，我所做的就是在幻灯片中对页边距和填充进行动画处理：
$(this).next().slideToggle("slow");
$(this).next().animate({ margin: "XXpx", padding: "XXpx" }, "slow");将它们都设置为减速将确保它们同时完成。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/909955
复制相关文章
相似问题
腾讯云开发者
