jQuery页面过渡使上一页为空白

jQuery page transition makes previous page blank

本文关键字：一页 空白 jQuery      更新时间：2023-09-26

我将以下脚本与 jQuery 一起使用，以便在页面之间导航时进行淡入淡出过渡：

$(document).ready(function() {
    $("body").css("display", "none");
    $("body").fadeIn(200);
    $("a").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(200, redirectPage);
    });
    function redirectPage() {
        window.location = linkLocation;
    }
});

当仅使用链接在页面之间导航时，它工作正常，但是当使用浏览器上的后退按钮时，返回的页面为空白。

如何使页面在通过后退按钮导航到页面时正确显示？

使用后退按钮将您返回到离开前一页的状态（在这种情况下，完全淡出），至少我是这样理解的。如果我错了，请随时纠正我。

无论如何，我认为重新绘制 DOM 可以解决您的问题（取自 Coderwall）：

$.fn.redraw = function(){
    $(document).each(function(){
        var redraw = this.offsetHeight;
    });
};

并调用该函数：$(document).redraw();

尝试使用委托怎么样

$("a").on('click', function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("body").fadeOut(200, redirectPage);
});
相关文章：