单击按钮时的 jQuery 函数，然后显示动画并加载新页面

Question

我正在开发我的新作品集网站，并试图弄清楚如何在转到另一个页面时制作一个简单的动画，这样看起来会更流畅一些。

我在页面上创建了一个div (.pageOverlay)，带有opacity: 0 属性。当有人点击一个按钮/链接时，我希望它淡入，并在它完全淡入后加载新页面。

新页面也以黑色叠加开始，然后逐渐淡出，因此看起来很平滑。​

.

.

编辑：

这是经过一些建议后的新代码。 jQuery：

$(document).ready(function() {
    $(".pageOverlay").css("opacity","0");
    $("a.newPage").click(function(event) {
        event.preventDefault();
        $(".pageOverlay").css("opacity","1");

        var href = $(this).attr('href');

        setTimeout(function() {window.location = href}, 2000);
        return false;
    });
});

HTML 和 CSS ：

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/assets/css/main.css" type="text/css" rel="stylesheet">
    <link href="/assets/vendor/css/swiper.min.css" rel="stylesheet">
</head>

<body>
<div class="pageOverlay"></div>
<a href="/portfolio" class="newPage">Test</a>
    
    div.pageOverlay {
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        background-color: #000000;
        opacity: 0;
        pointer-events: none;
        transition: .35s all ease-in-out;
        left: 0;
        top: 0;
    }

页脚

    <script src="/assets/vendor/js/jquery.js"></script>
    <script src="/assets/js/initialize.js"></script>
    <script src="/assets/js/default.js"></script>
    <script src="/assets/js/pageload.js"></script>
    <script src="/assets/vendor/js/swiper.min.js"></script>
    </div>
</body>
</html>

它仍然会立即加载新页面，但是当我在新页面加载后立即返回时，它会再次进入新页面而无需我做任何事情。

我还发现，在我的移动设备上，延迟有效！只是由于某种原因，覆盖不显示。在我的笔记本电脑上，情况正好相反，覆盖显示，但延迟不起作用。

Answer 1

我在您的head 或body 中看不到任何script 标签。这可能是问题所在。

编辑

解决了这个问题。只是缺少一些类和一些多余的脚本标签。

Answer 2

我认为问题在于正常的 href url 会立即执行，因为您没有在事件对象上使用 preventDefault() 。尝试将event 参数添加到事件处理程序，并将event.preventDefault() 添加到处理程序本身。

$(document).ready(function() {
    $(".pageOverlay").css("opacity","0");
    $("a.newPage").click(function(event) {
        event.preventDefault();
        $(".pageOverlay").css("opacity","1");

        var href = $(this).attr('href');

        setTimeout(function() {window.location = href}, 1000);
        return false;
    });
});

div.pageOverlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background-color: #000000;
    opacity: 0;
    pointer-events: none;
    transition: .35s all ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pageOverlay"></div>
<a class="newPage" href="http://www.stackoverflow.com">test</a>