0

我开始学习 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>
4

1 回答 1

0

$(function() { ... })当 DOM 准备好时使函数运行。不幸的是，浏览器会在加载时呈现内容，因此总体效果是浏览器在加载时呈现文档，然后在加载后将其隐藏并淡入。

这在您的本地计算机上不可见，因为内容加载速度如此之快，以至于浏览器可能没有机会在您的代码运行之前逐步呈现它。在有延迟的真实服务器上，浏览器有机会在 DOM 准备好之前进行渲染。

与其使用 on-DOM-ready 回调作为隐藏它的触发器，不如尝试将它作为绝对的第一件事隐藏在里面#matter1：

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

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

于 2013-06-28T03:48:22.610 回答