Question

我开始学习jquery并放置几页fadeIn和fadeout方法。它在我的localhost上工作正常。当我把它放在服务器上时，过渡效果并不顺畅。身体内容淡出和页脚部分在转移到下一页之前出现，并且在进入下一页后我的标题口吃。

我在每个页面使用以下代码

<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准备好之前呈现。

不要使用on-DOM-ready回调作为隐藏它的触发器，而是尝试将其隐藏为#matter1内的绝对第一件事：

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

然后只要#matter1存在，它就会被隐藏。然后在你的DOM就绪处理程序中，像以前一样做所有事情，除了现在不需要.hide()。

Jquery页面转换不顺畅

1 个答案: