Question

大家好我最近看过一个网站：http://soulland.com/ 我想知道他们是如何进行页面转换的：单击链接时页面淡出然后等待页面加载然后完全淡入他们是怎么做到的？我在我的网站项目上运行了一个代码，但它没有给出相同的结果：

<script>
    var speed = 800;
    $('body').hide();
    $(document).ready(function() {
      $('body').fadeIn(speed, function() {
          $('a[href]').click(function(event) {
              var url = $(this).attr('href');
              if (url.indexOf('#') == 0 || url.indexOf('JavaScript:') == 0) return;
              event.preventDefault();
              $('body').fadeOut(speed, function() {
                  window.location = url;
              });
          });
      });
    });
  </script>

我想要两种方法：第一种情况：页面的淡入/淡出部分第二种情况：整个页面淡入/淡出

Answer 1

一种方法是默认情况下使您的网页不透明度等于0，并在加载整个页面时将其更改为1。不透明度的变化以及css过渡应该可以解决问题：

你的风格：

body {
   opacity : 0;
   transition : all ease 1s;
}

body.loaded {
   opacity : 1;
}

你的javascript：

$(document).ready(function() {
  $("body").addClass('loaded');

  $(window).on('beforeunload', function () {
    $('body').removeClass('loaded');
  });
});

Updated DEMO

使用ajax和jquery进行页面转换？

1 个答案: