javascript - JQuery 淡入页面

Question

我有一堆 HTML 页面，它们是单独的文件，但我想在每个页面之间进行简单的淡入/淡出。

我使用了以下代码：

$("#content").css("display", "none");

$("#content").fadeIn(2000);

$("ul.menu li a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#content").fadeOut(1000, redirectPage);      
});

function redirectPage() {
    window.location = linkLocation;
}

在这个阶段我已经将它绑定到我的主菜单，内容是我的页眉和页脚之间的 div（我不想应用效果）

但问题在于它会闪烁一点，而且它会在消失之前短暂显示内容，然后再次淡入。

有没有更好/更简单的解决方案？

Answer 1

试试这个代码：

$("#content").css("display", "none");

$("#content").fadeIn(2000);

$("ul.menu li a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#content").fadeOut(1000, redirectPage);      
});

function redirectPage() {
    $("#content").css('visibility' : 0); // use to remove the content - it won't be diplayed
    window.location = linkLocation;
}