jQuery使用预加载程序平滑页面转换

当我在我的网站上按下一个链接时，我尝试使用下面的代码淡入一个div内容，而不是当我按下另一个链接时淡出，新内容淡入。您可以在此处看到此示例：

嗯，在加载之前，我需要在每个页面的顶部放置一个动画gif预加载程序。有人能帮我处理jquery代码吗？ 谢谢

交换内容和淡入淡出的代码：

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

---

使用此选项可添加加载覆盖

$("a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#content").fadeOut(1000, redirectPage);    
    $("body").append("<div class='LoadingOverlay' />");
}

通常，在新的ajax调用完成后，我会这样做

 $(".LoadingOverlay").remove();

---

但是，在预加载完成后，您似乎将加载一个新页面，因此您不需要此功能。

我非常确定，在加载新页面时，该页面的代码将导致非常不流畅的“闪烁”，然后在淡入之前隐藏在$（document）.ready（）处。感谢您的回复，但我必须插入以下内容：谢谢，但是我需要一个完整的代码来包含在我的代码中，因为我是Jquesry的新手。感谢您告诉我在哪里插入append（）调用。将CSS放入CSS文件中。您不需要remove（）调用。

 $(".LoadingOverlay").remove();