如何实现jQuery淡入淡出？

Question

使用jQuery淡入和淡出，我希望当前页面在导航栏上的链接被选中时淡出，然后希望新页面淡入。我不能得到预期的效果。

下面是我的代码：

$(document).ready(function() {
  $('body').css('display', 'none');
  $('body').fadeIn(2000);

  $('a').click(function() {
    event.preventDefault();
    newLocation = this.href;
    $('body').fadeOut(2000, newpage);
  });

  function newpage() {
    window.location = newLocation;
  }
});

Answer 1

试试这个：

让我们看看你的导航链接是：

<a href="nextPage.html" class="switch">My LINK</a>

那么你的jquery代码应该是：

$(document).ready(function() {

    $('body').css('display', 'none');

    $('body').fadeIn(2000);

    $('a.switch').click(function(event) {

        event.preventDefault();

        newLocation = this.href;

        $('body').fadeOut(2000, newpage);

    });

    function newpage() {

        window.location = newLocation;

    }

});

不要忘记将事件作为参数放到函数中。

希望它能帮上忙！

Answer 2

试一试威尔的建议。实现这一点的最好方法是防止整个页面重新加载。使用Ajax或.load()函数！“描述:从服务器加载数据，并将返回的HTML放入匹配的元素中。”加载内容后，将其淡入。

Answer 3

HTML

<body style="display:none;">
content
</body>

JS

function redirectPage() {
  window.location = linkLocation;
}


$(document).ready(function() {

$("body").fadeIn(600);

$('a').click(function(event) {
    if (this.href == "" || this.href == null) {
      event.preventDefault();
      return;
    }
    if ((this.href.indexOf("#") == -1) && (this.href.indexOf("mailto:") == -1) && (this.href.indexOf("javascript:") == -1) && (this.target != "_blank")) {
      event.preventDefault();
      linkLocation = this.href;
      $("body").fadeOut(600, redirectPage);
    }
  });

});