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

Posted 2023-05-08

【中文标题】基本的 jQuery slideUp 和 slideDown 让我发疯！

【英文标题】：Basic jQuery slideUp and slideDown driving me mad!

【发布时间】：2010-11-08 16:47:37

【问题描述】：

我的 jQuery 技能通常都很好，但这让我很兴奋 疯了！

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

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

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

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

任何想法都将不胜感激！

你的， 克里斯

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

【参考方案1】：

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

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

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

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

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

【讨论】：

令人惊讶的是，JQuery 中的人如何让这个通过...谢谢！真正解决任何问题。多年来，我一直在寻找直针针织解决方案。

【参考方案2】：

您需要在内容上设置一个宽度或高度才能使其流畅地制作动画。

【讨论】：

谢谢我已经阅读了这篇文章，但假设（因为我在其他地方读到了一个错误）它适用于以前版本的 jQuery。耻辱。

必须承认我认为自从玩弄它以来我已经找到了一个更好的解决方案 - 如下所述！ :)

它仍然基本上增加了元素的高度！

除了它将高度存储在DOM中以供随时参考。我开始考虑使用 jQuery .data 来存储信息，但这似乎更有效:)

那个链接对我来说超时了，回答有限使用。 “鼓励链接到外部资源，但请在链接周围添加上下文，以便您的其他用户了解它是什么以及为什么存在。始终引用重要链接的最相关部分，以防目标站点无法访问或永久离线。”

【参考方案3】：

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

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

【讨论】：

这是迄今为止最简单的解决方案，无论是否涉及表。我尝试设置 css 高度和此处找到的其他技巧，但 fadeIn/fadeOut 效果很好。

【参考方案4】：

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

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

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

更新（来自 cmets）：

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

【讨论】：

感谢您的回答，但我并不想真正获得高度 - 这只是调试信息。我只是希望它在不跳跃的情况下很好地动画！

在demo链接上看不到效果吗？当您点击前两个选项卡时，内容会跳到底部，而不是一直向下滑动。它不像第三个选项卡那样流畅地制作动画。根据页面右侧的面板，它也没有拉出正确的高度来制作动画。它似乎只有在动画一次后才能解决。

尝试通过它们的回调将动画链接在一起。

水，你说的高度不对。在 div 完全可见之前，您正在获取高度。这会给你一个不完整的身高——就像我在你弯腰系鞋带时测量你的身高一样。

我必须承认我现在找到了自己的动态解决方案。 mizudesign.com/jquery/accordian/basic.html 应该是固定的。这真的很简单 - 只需在隐藏 div 之前使用 .css 添加高度。工作一种享受:)

【参考方案5】：

我还遇到了一个恼人的slideUp() 跳转问题，它发生在 Safari 上，但不是 chrome 或 IE。原来，我隐藏/显示的 div 标签就在另一个包含 float:left div 的 div 标签的正下方。在向上滑动的过程中，浮动的 div 会暂时重新渲染，从而导致跳跃。

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

【参考方案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;   

【参考方案7】：

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

【参考方案8】：

这对我有用：

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

【参考方案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:"" );
     
);

【参考方案10】：

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

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