用JS检测后退和前进按钮

发布于 2024-12-11 13:34:06 字数 319 浏览 0 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怀里藏娇 2024-12-18 13:34:06

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

关键是打开：

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

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

如何使用 jQuery 制作 Slick 页面过渡

页面淡入淡出效果与 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 事件不可靠，您无法确定它们是否可靠
完全执行，因为卸载速度不同
浏览器和计算机。另外，为了实现淡入效果，
卸载必须延迟，这是不可能的。

此引用来自 Jquery, FadeIn before unload 的答案。

Simply hide body and then fadeIn :)

the key is on :

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

You can see the follwoing links for more help:

How to Use jQuery to Make Slick Page Transitions

Page Fade In effect with Jquery

First Link is better :)

Edit: you can see comments for more info, but my result is :

If you back to page using hotkeys, or history.back() or history.forward() maybe the .fadeIn() effect will not work again, you can try the following code to redo fadeIn effect :

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

But if you tried use :

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

});

or:

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

the fadeOut will not work even the code syntactically is correct, after search, seemes that because:

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.

This quotation from answer of Jquery, FadeIn before unload .

回复收藏 0 原文