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就會比應有的幅度向下滑動，然后閃爍，然后變為實際高度（高度應為）。

這是小提琴 。 請確保“結果”窗口的寬度至少為1000+像素，否則它將無法正常工作（錯誤不會顯示）。

Answer 1

嘗試了解您正在使用的代碼。
這就是我認為jQuery的slideUp()和slideDown()起作用的方式； 主要的算法改變height的元件的，並display了后height等於height的元件或為“0”的。

因此，當您將元素的position設置為relative您將看到被稱為“閃爍”的信息，特別是當您在同一位置有多個元素時。 當您使用fadeIn() ， fadeOut()等時，您還將看到這些“閃爍”，因為在這些情況下，元素的display不是立即設置為“ none”或任何可見的，而是在動畫完成之后。

解：

將元素的位置設置為絕對位置。 那應該可以解決您的問題； 例子

Answer 2

看到我對這個JSFIDDLE的建議

這里是那里的變化的解釋：

問題

由於每個.top-drawer都包含所有這些浮動元素，因此jQuery在計算div的高度時會遇到很多問題，因為元素會在上下滑動時四處移動。

建議

改為改為inline-block 。 但是，要使其與CSS一起使用，尤其是與每個.top-drawer上的填充一起使用，您需要使用box-sizing: border-box; 在任何使用padding ， inline-block和width與％的對象上 。 如果好奇，您可以在這里閱讀。

新問題

如果您選擇inline-block路線（現在是最佳做法）。 您將需要使用jQuery 1.8.xx或更高版本。 我在您的小提琴中注意到，您使用的是1.7.2，它有一個關於border-box的錯誤，此錯誤在之后的版本border-box已得到修復。