javascript - 用JS检测后退和前进按钮

Question

我有一个网站设计，我希望页面在您从一个页面导航到另一个页面时进行淡入淡出过渡。我正在研究使用一个复杂的方法 jQuery.load以及哈希标签 url 等。然后我意识到，可以通过简单地拦截链接点击、运行淡入淡出动画然后重定向到链接页面(设置为淡入)来实现更简单的解决方案。无需使用 ajax 并在一个页面内运行所有内容。

我只有一个小问题。如果用户单击前进或后退按钮，或使用键盘达到相同的效果...如何触发淡入淡出动画？我知道你可以使用jQuery('window').unload()但随后我不知道我是要后退还是前进，还是只是刷新页面。这很重要，因为淡入淡出动画实际上需要淡出背景以匹配它要到达的页面。

Answer 1

只需隐藏正文，然后淡入:)

key 已打开:

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

您可以查看以下链接以获得更多帮助:

How to Use jQuery to Make Slick Page Transitions

Page Fade In effect with Jquery

第一个链接更好:)

<小时/>

编辑:您可以查看评论以获取更多信息，但我的结果是:

如果您使用热键返回页面，或者 history.back() 或 history.forward() 可能是 .fadeIn()效果将不再起作用，您可以尝试以下代码来重做 fadeIn 效果:

$(window).load(function(){
    $("body").css("display", "none");
    $("body").fadeIn(2000);
});

但是如果你尝试使用:

$(window).bind('beforeunload',function(){
    $("body").fadeOut(2000);

});

或者:

$(window).unload(function(){
    $("body").fadeOut(2000);
});

即使代码语法正确，fadeOut 也不起作用，经过搜索，似乎是因为:

beforeunload events are unreliable, you cannot make sure they are fully executed, because the differences in unload speeds across browsers and computers. Also, to achieve the fade-in effect, the unload must be delayed, which is not possible.

此引自Jquery, FadeIn before unload的回答.