I am trying to create a jQuery fadeIn fadeout effect for my page content using the code below.

$(document).ready(function (){
$("#main").click(function(){
    $("#content").fadeOut(800, function(){
        $("#content").load("main.html", function(){
            $("#content").fadeIn(800);
        });
    });
});

$("#gallery").click(function(){
    $("#content").fadeOut(800, function(){
        $("#content").load("gallery.html", function(){
            $("#content").fadeIn(800);
        });
    });
});

});

So whenever a user clicks on either the main link or gallery link, the old content fades out and new content fades in. The problem I am facing is that for every link I have to repeat the same code again and again. So I tried to use a loop to simplify this but it doesn't work. Here is my code:

var p = ["#main","#gallery", "#contact"];
var q = ["main.html", "gallery.html", "contact.html"];
for (i=0;i<=(p.length-1);i++){
    $(p[i]).click(function(){
    $("#content").fadeOut(500, function(){
        $("#content").load(q[i], function(){
            $("#content").fadeIn(500);
        });
    });
});
}

It works fine when I write repeat the scripts for each link but it doesn't work when I combine them in a loop. I only get the FadeOut effect and nothing happens after that.

This might be a very simple issue or may be something deep into jQuery. Any hint or help is greatly appreciated.

TK