JQuery переход страницы не гладкий

Question

Я начал изучать jquery и поместил пару методов fadeIn и fadeout. Он отлично работает на моем локальном хосте. когда я помещаю его на сервер, эффекты перехода не являются гладкими. до тех пор, пока не перейдет на следующую страницу, а затем загорится заголовок заголовка, после перехода на следующую страницу.

я использую следующий код на каждой странице

<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.

Вместо того чтобы использовать на-DOM-готов обратного вызова в качестве триггера, чтобы скрыть его, попытайтесь скрыть его как абсолютное первое, что внутри #matter1:

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

Тогда как только #matter1 существует, он будет скрыт. Затем в вашем DOM-готовом обработчике сделайте все как раньше, за исключением того, что .hide() теперь не нужно.