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

Question

我的 jQuery 技能通常很好，但这让我发疯！

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

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

我在右侧显示目标 div 的高度 - 如果它包含文本，它认为它比它短并且跳跃。如果是图片就没有问题。

我不知道我哪里出错了——它显然在 CSS 中的某个地方，但我已经尝试了所有常见的嫌疑人，比如 display:block

任何想法将不胜感激！

你的，克里斯

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

score 18 · Accepted Answer

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

http://www.mizudesign.com/jquery/accordian/basic.html应该是固定的。

这真的很简单 - 只需在隐藏 div 之前使用 .css 添加高度。工作一种享受:)

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

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

score 16 · Accepted Answer

16

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

于 2009-07-07T13:41:49.847 回答

score 3 · Accepted Answer

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

还要“记住”表格在使用 slideDown slideUp 时会出现问题，而是使用 fadeIn fadeOut

score 1 · Accepted Answer

一旦 div 从回调中完成动画，获取高度。您可能会在 div 动画时获得高度，并且获得过渡值。

如果您的动画跳动，请尝试使用回调。不要同时打开一个 div 和隐藏一个 div。相反，隐藏您的第一个 div，并在回调中显示您的下一个 div。

$(".someDiv").slideUp("normal", function(){
  /* This animation won't start until the first
     has finished */
  $(".someOtherDiv").slideDown();
});

更新（来自评论）：

红方：http : //jqueryfordesigners.com/slidedown-animation-jump-revisited/

score 1 · Accepted Answer

我在 Safari 上也有一个烦人的slideUp()跳转问题，但不是 chrome 或 IE。事实证明，我隐藏/显示的 div 标签就在另一个包含float:leftdiv 的 div 标签的正下方。在向上滑动的过程中，浮动的 div 会暂时重新渲染，从而导致跳跃。

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

score 1 · Accepted Answer

我的问题是，因为我有一个响应式设计，所以我不知道我的元素的宽度或高度是多少。在阅读了这篇博文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;

score 1 · Accepted Answer

用 padding-top 和 padding-bottom 值替换 margin-top 和 margin-bottom 值对我有用。在此之后不要忘记将边距值设置为 0。

score 0 · Accepted Answer

0

这对我有用：

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

于 2011-05-25T12:54:18.157 回答

score 0 · Accepted Answer

问题是由于 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:"" });
    } 
});

score 0 · Accepted Answer

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

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

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

10 回答 10

更新（来自评论）：

Related

Reference