基本jQuery的效果基本show和了slideDown快把我逼疯了!
题
我的jQuery的技能都还不错,但通常这是推动我 狂!
这是一个相当简单的手风琴我从头开始编写了。运用 jQuery的1.3.2所以不应该有任何跳跃的错误,但基本上如果 你看一看的示例:
http://www.mizudesign.com/jquery/accordian/basic.html
我显示该高度为在右侧的目标的div - 如果它 包含它认为这是短于它和跳跃的文字。 如果它是一个图像没有任何问题。
我想不通我要去哪里错了 - 这显然在CSS 的地方,但我已经尝试了所有通常的嫌疑人等显示:块
任何想法将受到欢迎!
此致, 克里斯
PS请原谅的源代码的性质,我已经撕开它 整个项目我的工作因此它不包括一些div是 并不需要在那里。
解决方案
您需要关于所述内容的宽度或高度为它顺利动画。
其他提示
我必须承认,我发现我自己的动态解决方案现在。
http://www.mizudesign.com/jquery/accordian/basic.html 应该固定。
这是真的很简单 - 只是增加了使用的CSS隐藏的div之前的高度。 工作一个治疗:)
$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});
$("#PlayerButtonsContent div").hide();
我认为问题是,当添加填充或余量然后它跳跃,这是通过我的情况。你必须动画余量在回调
另外“记住”其表表现车用了slideDown效果基本show和而使用淡入淡出
获取高度一旦div有从回调完成其动画。这有可能是你得到的高度,而格正在兴致勃勃地和你得到的过渡值。
如果你的动画跳动,请尝试使用回调。不要打开一个div和隐藏在同一时间一个div。相反,隐藏自己的第一个div和回调中表现出你的下一个DIV。
$(".someDiv").slideUp("normal", function(){
/* This animation won't start until the first
has finished */
$(".someOtherDiv").slideDown();
});
更新(从注释):
redsquare: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/
我也有这样的Safari上出现恼人的slideUp()
跳的问题,而不是Chrome或IE浏览器。原来,div标签,我隐藏/显示是正确低于包含float:left
div的另一个div标签。在滑动时,浮动的div将暂时重新渲染造成的跳跃。
在修复程序简单地增加clear:both
到隐藏/显示div的风格。
我的问题是,因为我有一个响应式设计我不知道我的元素的宽度或高度将是。阅读这篇博客文章的 http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm 我意识到:jQuery是改变我元件的位置,以固定并与所述元素的布局搞乱。添加以下到我的CSS为元素,并没有注意到在IE7 +,火狐,Chrome和Safari浏览器的任何不良的副作用。
display: none;
overflow: hidden;
position: relative !important;
更换的margin-top和具有填充-top和填充底值下边距值确实起作用我。不要忘记在此之后设置裕量值为0。
这为我工作:
$(this).pathtoslidingelementhere.width($(this).parent().width());
的问题是由于IE(怪异模式)试图呈现“高度:0像素”。
在修正:动画高度为1(不为0),则隐藏和复位高度:
// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
// hide last pixel and reset height
$(this).hide().css({ height:"" });
}
});
对我来说,问题是在DIV边缘(或填充),以显示与滑动/隐藏,但我需要给余量(或填充)到该div。我解决了这一招:
.slide-div:before{
content: " ";
display: block;
margin-top: 15px;
}