Question

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

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

Answer 1

只需隐藏身体然后淡出：）

关键是：

$(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

First Link更好：）

修改：您可以查看评论以获取更多信息，但我的结果是：

如果您使用热键返回页面，或history.back()或history.forward()可能.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事件不可靠，您无法确定它们是否存在完全执行，因为卸载速度的差异浏览器和计算机。另外，为了达到淡入效果，卸货必须延迟，这是不可能的。

来自Jquery, FadeIn before unload的回答的引文。

Answer 2

这里有非常link的键盘事件实例，如果你合并@ Al-Mothafar答案，它将是完整的：）

用于后退箭头keyCode = 37
  对于退格键keyCode = 8
  对于前向箭头keyCode = 39

使用JS检测后退和前进按钮

2 个答案: