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

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

无论如何，我认为重新绘制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页面转换使前一页空白

2 个答案: