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

尝试一下will的建议。实现此目的的最佳方法是防止整个页面重新加载。使用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);
    }
  });

});

如何实现jQuery淡入和淡出？

3 个答案: