jQuery 页面转换使上一页空白

Question

我将以下脚本与 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;
    }
});

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

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

Answer 1

使用后退按钮 returns 可以回到上一页离开前的状态（在本例中，完全淡出），至少我是这么理解的。如果我错了，请随时纠正我。

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

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

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

Answer 2

尝试使用委托怎么样

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

jQuery 页面转换使上一页空白

jQuery page transition makes previous page blank

javascript

jquery

transition