jQuery切换中的奇怪闪烁

Question

我有一个奇怪的问题，无论我尝试什么都找不到解决方案。 我有一个简单的菜单，可以切换几个 div（向上/向下滑动），如下所示：

    <div class="navigation">
        <ul class="left">
            <li><a href="#lorem1" class="menu">lorem1</a></li>
            <li><a href="#lorem2" class="menu">lorem2</a></li>
            <li><a href="#lorem3" class="menu">lorem3</a></li>
        </ul>       
    </div>

还有一些正在切换的div。很简单，但是代码很多，所以我不会在这里粘贴。

使其工作的脚本是：

$('.navigation a').click(function() {
  var $requested = $(this.getAttribute('href'));
  $('.top-drawer').not($requested).slideUp('slow');
  $requested.slideToggle('slow')
});

一旦用户点击链接，div 会向下滑动超过应有的高度，闪烁，然后变为实际高度（应该是高度）。

这是Fiddle。请确保“结果”窗口的宽度至少为 1000+ 像素，否则将无法正常工作（不会显示错误）。

Answer 1

查看我对此JSFIDDLE的建议

这里解释一下那里的变化：

问题

由于每个.top-drawer 中的所有这些浮动元素，jQuery 在计算div 的高度时存在很多问题，因为元素会在上下滑动时四处移动。

建议

改用inline-block。但是为了让你的 CSS 工作，特别是每个 .top-drawer 上的填充，你需要在任何使用 padding、inline-block 和 width 的东西上使用 box-sizing: border-box; 和 %。如果好奇，您可以阅读此HERE。

新问题

如果你走inline-block 的路线（现在是最佳实践）。您将需要使用 jQuery 1.8.xx 或更高版本。我注意到在您的小提琴中您使用的是 1.7.2，它有一个带有 border-box 的错误，该错误已在之后的版本中修复。

Answer 2

尝试理解您正在使用的代码。
这就是我认为 jQuery 的 slideUp() 和 slideDown() 的工作方式；主要是算法改变了元素的height，height之后的display等于元素的height或者为“0”。

因此，当您将元素的 position 设置为 relative 时，您会看到所谓的“闪烁”，特别是当您在同一位置有多个元素时。当您使用fadeIn()、fadeOut() 等时，您还会看到这些“闪烁”，因为元素的display 在这些情况下不会立即设置为“无”或任何可见的，而是在动画完成之后。

解决方案：

将元素的位置设置为绝对位置。那应该可以解决您的问题； example.