Question

我的jQuery技能通常很好，但这让我很开心狂！

这是一个相当简单的手风琴我从头开始编码。运用 jQuery 1.3.2所以不应该有任何跳跃错误，但基本上如果你看一下这个例子：

http://www.mizudesign.com/jquery/accordian/basic.html

我正在显示右侧目标div的高度 - 如果是的话包含它认为比它更短的文本和跳跃。如果是图像则没有问题。

我无法弄清楚我哪里出错了 - 显然在CSS中在某个地方，但我已经尝试了所有常见的嫌疑人，如display：block

任何想法都会感激不尽！

此致，克里斯

PS请原谅源代码的性质，我已经把它撕掉了我正在研究的整个项目，所以它确实包含了一些div 真的不需要在那里。

Answer 1

您需要内容的宽度或高度才能平滑地制作动画。

Answer 2

我必须承认我现在已经找到了自己的动态解决方案。

http://www.mizudesign.com/jquery/accordian/basic.html应该修复。

真的非常简单 - 只需在隐藏div之前使用.css添加高度。是一种享受：）

$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});

$("#PlayerButtonsContent div").hide();

Answer 3

我认为问题是，当添加填充或边距然后它跳跃时，我就是这种情况。你必须在回调中为边距设置动画

另外“请记住”表格使用slideDown slideUp表现错误，而是使用fadeIn fadeOut

Answer 4

div从回调中完成动画后获取高度。你可能在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/

Answer 5

我在Safari上发生了一个令人讨厌的slideUp()跳转问题，但不是Chrome或IE。事实证明，我隐藏/显示的div标签位于包含float:left div的另一个div标签的正下方。在向上滑动期间，浮动的div将暂时重新渲染，从而导致跳跃。

修复只是将clear:both添加到隐藏/显示div的样式中。

Answer 6

我的问题是，因为我有一个响应式设计，我不知道我的元素的宽度或高度是多少。在阅读了这篇博客文章http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm之后，我意识到jQuery正在将我的元素的位置改为固定并弄乱元素的布局。我将以下内容添加到我的CSS元素中，并没有注意到IE7 +，firefox，chrome和safari中的任何不良副作用。

display: none;  
overflow: hidden;
position: relative !important;

Answer 7

用padding-top和padding-bottom值替换margin-top和margin-bottom值对我来说是个窍门。在此之后不要忘记将边距值设置为0.

Answer 8

这对我有用：

$(this).pathtoslidingelementhere.width($(this).parent().width());

Answer 9

问题是由于IE（怪癖模式）试图渲染“height：0px”。

修复：将高度设置为1（不是0），然后隐藏并重置高度：

// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        // hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});

Answer 10

对我来说，问题是使用幻灯片显示/隐藏div上的边距（或填充），但我需要为该div提供边距（或填充）。我用这个技巧解决了：

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }

基本的jQuery slideUp和slideDown让我发疯！

10 个答案:

更新（来自评论）：