jQuery，準備好的隱藏元素始終在頁面加載時跳躍。這怎麼可以避免？

Question

這是代碼。

我不能申請display:none;

$(document).ready(function() { 
    $("#LeftNav li.navCatHead").not(":first").siblings("li").hide().end().end().first().addClass("open"); 
}); 

Answer 1

本文可能有點幫助： http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

Answer 2

代替將display:none的，（叫$.hide()），如何更換你試圖隱瞞與被設置爲相同大小的空div項目爲任何你試圖隱藏？

Answer 3

我經常發現display:none;的一個不錯的選擇是在加載時將不透明度設置爲0。

$("#LeftNav li.navCatHead").not(":first").siblings("li").css('opacity','0').end().end().first().addClass("open"); 

但是不是有這麼長的字符串，找到選擇，我想補充一個新的類，以每個人並將其設置爲opacity: 0;頁面加載，因爲它會更快得多。

Answer 4

爲什麼你不能設置「display：none」？不知道你的情況，但你可能可以扭轉一點點的工作流程

而不是顯示列表最初，然後隱藏某些條件的基礎上，一開始試試隱藏（顯示：無）列表，然後顯示某些基於某種條件。

這樣你就不會以某些元素「顯示然後消失」結束。

Answer 5

不要等到文件準備好。您可以將jQuery代碼放置在頁面底部的關閉主體標籤之前，或者緊跟在有問題的元素之後。

  <!-- ...other code... --> 
      <li>Sibling</li> 
     </ul> 
     <script type="text/javascript"> 
      // this should work... 
      $("#LeftNav li.navCatHead").not(":first").siblings("li").hide().end().end().first().addClass("open"); 
     </script> 
     <div class='content'>more stuff.</div> 
    </body> 
</html>