用JS检测后退和前进按钮

Question

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

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

Answer 1

直接隐藏body然后fadeIn:)

key is on:

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

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

如何使用jQuery制作流畅的页面过渡

页面淡出效果与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);
});

的淡出将不工作，即使代码语法是正确的，搜索后，似乎是因为:

beforeunload事件是不可靠的，您无法确定它们是否可靠完全执行，因为在卸载速度的差异跨越浏览器和电脑。另外，为了达到渐隐效果卸载必须延迟，这是不可能的。

这段话摘自Jquery的答案，卸载前的FadeIn

Answer 2

这里是键盘事件的实时示例链接，如果您合并@Al-Mothafar的答案，它将是完整的:)

for backarrow keyCode = 37
for backspace keyCode = 8
键码= 39