jQuery/Javascript Function delays running until another function finishes (if needed)

Question

so I'm trying to use some javascript to do some simple fadeIn/fadeOut animations of some text divs. While I'm sure there is probably a better way to write my functions, they currently do work but with a minor issue that I'd like to fix and not sure of the best approach.

$('#portfolio-link').click(function(){
   $( "#resume" ).fadeOut(500);
   $( "#profile" ).fadeOut(500);
   $( "#contact" ).fadeOut(500);
   setTimeout(function(){$( "#portfolio" ).fadeIn(500);},500);
}); 

$('#resume-link').click(function(){
   $( "#portfolio" ).fadeOut(500);
   $( "#profile" ).fadeOut(500);
   $( "#contact" ).fadeOut(500);
   setTimeout(function(){$( "#resume" ).fadeIn(500);},500);
}); 

$('#profile-link').click(function(){
   $( "#portfolio" ).fadeOut(500);
   $( "#resume" ).fadeOut(500);
   $( "#contact" ).fadeOut(500);
   setTimeout(function(){$( "#profile" ).fadeIn(500);},500);
}); 

$('#contact-link').click(function(){
   $( "#portfolio" ).fadeOut(500);
   $( "#resume" ).fadeOut(500);
   $( "#profile" ).fadeOut(500);
   setTimeout(function(){$( "#contact" ).fadeIn(500);},500);
}); 

Just to explain the code a little bit; the #portfolio-link, #resume-link, etc. are my navigation links. When those are clicked I want them to fade out the text div currently showing (#portfolio, #resume, etc.) and replace it with the new div (For example if I click the portfolio nav link, I want to fade out the other 3 and fade in the porfolio text div).

The problem I'm having is sometimes there are multiple divs showing if you click the nav links too quickly because the other function hasn't finished before the new one starts so I'm just wondering what the best approach to fixing this would be.

Perhaps setting some sort of variable to a value of 1 at the beginning of the function and 0 when it's finished, then checking for the value to be 0 before allowing a new function to begin? If that is a good approach, would it create a lag between functions (leaving the potential for a lot of delayed fading going on) or just not do anything on a click?

Any help on this is appreciated as I am a novice at best with javascript/jquery.

Thanks

Answer 1

You should use .finish() jquery function, which is the equivalent of .stop(true,true). This will ensure that all previous animation on the object is finished and it is in the final position. I'm going to show you the code for one of them, this will apply for all the other elements.

$('#portfolio-link').click(function(){
   $( "#resume" ).finish().fadeOut(500);
   $( "#profile" ).finish().fadeOut(500);
   $( "#contact" ).finish().fadeOut(500);
   setTimeout(function(){$( "#portfolio" ).fadeIn(500);},500);
}); 

UPDATE

The easiest way to achieve that is to add a class to all of the elements (contact,profile,resume,portfolio), let's call it class div_content then use:

$('#portfolio-link').click(function(){
   $( ".div_content" ).finish().fadeOut(500).promise().done(function(){$("#portfolio").fadeIn(500)});
}); 

Updated fiddle

Answer 2

The fadeOut jquery function takes a second argument that is a function to run at completion so:

   $('#portfolio-link').click(function(){
   $( "#resume" ).fadeOut(500);
   $( "#profile" ).fadeOut(500);
   $( "#contact" ).fadeOut(500, function() {
       $( "#portfolio" ).fadeIn(500)
   });