Question about the fadeIn() and fadeOut()
Alright, so I'm coding this website where I have content loaded at different times and I decided to use the fadeIn and fadeOut method.
I got it working for 2 divs. There are 5 different divs. Could this be a limitation to jquery? I'm still new to jquery, so I don't understand a whole lot. Anyways, I give you my code, so you can see what's wrong with it.
I was playing around firebug and I noticed that the first 2 sections load fine and whatnot. However when I go to the 3, 4, or 5th section when I click back to another link the jquery seems to not turn back to "display: none".
I appreciate any help provided. Thanks!
you can view what I'm trying to do here:
http://typefasterjoel.com/v3/
-
var currentPage = "#home";
$("#shome").click(function() {
if(currentPage == "#home") {
//Do Nothing
} else {
$(currentPage).fadeOut("slow", function(){
$("#home").fadeIn("slow");
});
$("#tree").fadeIn("slow");
currentPage = "#home";
}
});
$("#sabout").click(function() {
if(currentPage == "#about") {
} else {
$(currentPage).fadeOut("slow", function(){
$("#about").fadeIn("slow");
});
if($("#tree").css("display","block")) {
$("#tree").fadeOut("slow");
}
if($("#tree").css("display", "none")) {
//Do nothing.
}
currentPage = "#about";
}
});
$("#sportfolio").click(function() {
if(currentPage == "#portfolio") {
} else {
$(currentPage).fadeOut("slow", function(){
$("#portfolio").fadeIn("slow");
});
if($("#tree").css("display","block")) {
$("#tree").fadeOut("slow");
}
if($("#tree").css("display", "none")) {
//Do nothing.
}
currentPage = "#portfolio";
}
});
$("#sresume").click(function() {
if(currentPage == "#resume_container") {
//Do Nothing.
} else {
$(currentPage).fadeOut("slow", function(){
$("#resume_container").fadeIn("slow");
currentPage = "#resume_container";
});
if($("#tree").css("display","block")) {
$("#tree").fadeOut("slow");
}
if($("#tree").css("display", "none")) {
//Do nothing.
}
}
});
$("#scontact").click(function() {
if(currentPage == "#contact_container") {
} else {
$(currentPage).fadeOut("slow", function(){
$("#contact_container").fadeIn("slow");
});
if($("#tree").css("display","block")) {
$("#tree").fadeOut("slow");
}
if($("#tree").css("display", "none")) {
//Do nothing.
}
currentPage = "#contact_container";
}
});
Again! Thank You!