基本jQuery的效果基本show和了slideDown快把我逼疯了！

StackOverflow https://stackoverflow.com/questions/1092245

  •  11-09-2019
  •  | 
  •  

题

我的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;
  }
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top