Javascript 如何设置假期页面事件的时间

我看到了一个很好的移动应用程序设计，真的很好奇如何在现实中运行这个效果。让我用图片解释一下

所以，当页面加载时，它们会关闭。当我们想离开并访问下一页时，首先，它们会隐藏，然后再次显示，就像这样

编辑！ 问题是，我如何设置休假事件的时间，我可以显示加载样式，但当我想访问下一页时，它会非常快，或者如果我理解正确，效果不会显示

我的Main.js

$(document).ready(function () {
    $("div.top").addClass(" show");
    $("div.bottom").addClass(" show");
}); 

$(window).bind('beforeunload', function () {
    setTimeout(function () {
        $("div.top").removeClass(" show");
        $("div.bottom").removeClass(" show");
        $("div.top").addClass(" fade");
        $("div.bottom").addClass(" fade");
    }, 2000);
});

我的内容

<div class="loading">
    <div class="top">
        <h1>Logo</h1>
        <h3>Page one</h3>
    </div>
    <div class="bottom">

        <br>
        <a href="2.html">Next</a>
    </div>
</div>

---

然而，我没有完全理解你问题的意思，但是如果你想要加载的反向动画，比如，你必须使用

event.preventDefault();

您可以通过增加过渡时间来更改动画的时间

如果要在动画之后将用户重定向到新页面，可以使用以下代码：

window.location.href = "http://stackoverflow.com";

---

你的问题是什么？请在问题中解释，而不是在标题上。@MahmoodKohansal，sry。。。编辑。是的，这就是我想要的。。。谢谢但是，我希望文档中所有页面的效果都显示为“准备就绪并离开”事件

window.location.href = "http://stackoverflow.com";