jquery頁面轉換不順利

Question

我開始學習jquery，並把幾頁淡入淡出方法。它在我的本地主機上正常工作。當我把它放在服務器上時，轉換效果並不平坦。在轉到下一頁之前，主體內容淡出和頁腳部分即將到來，並且在轉到下一頁之後我的標題也會出現斷斷續續的情況。

我用下面的代碼在每一頁

<script type="text/javascript" src="js/jquery-2.0.1.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $('#matter1').hide().fadeIn(2000); 
    $('a.nav_font').click(function(){ 
     var link = $(this).attr('href'); 
     $('#matter1').fadeOut(1000, function(){ 
      window.location.href = link; 
     }); 
     return false; 
    }); 
}); 
</script> 

Answer 1

$(function() { ... })使得功能運行時，DOM已準備就緒。不幸的是，瀏覽器在加載內容時會呈現內容，因此總體效果是瀏覽器在加載文檔時呈現文檔，然後在加載後將其隱藏並淡入。

這是在您的本地機器，因爲內容加載速度太快，以至於瀏覽器可能沒有機會在代碼運行之前遞增地呈現它。在有延遲的真實服務器上，瀏覽器有機會在DOM準備好之前進行渲染。然後儘快

<div id="matter1"> 
    <script type="text/javascript"> 
     $("#matter1").hide(); 
    </script> 
    ... 

爲#matter1存在，它會被隱藏：

而不是使用上-DOM就緒回調的觸發隱藏它，試圖隱藏其作爲絕對的第一件事裏面#matter1。然後在DOM準備好的處理程序中，像以前一樣執行所有操作，但現在不需要.hide()。