JQuery fadeIn fadeOut loop issue
- by Tarun
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
