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

Inisde each function, before doing the animation you could use .stop() : $("#portfolio,#resume,#contact").stop(); — Karl-André Gagnon
– Karl-André Gagnon, Commented Feb 4, 2015 at 19:08
Well that will stop them from finishing to fade which I don't want. I want them to finish the function that is running then continue with the new one. — G4MOOSE
– G4MOOSE, Commented Feb 4, 2015 at 19:31

Emil Borconi · Accepted Answer · 2015-02-04 21:03:29Z

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

edited Feb 4, 2015 at 21:03

answered Feb 4, 2015 at 19:31

Emil Borconi

3,4972 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

G4MOOSE Over a year ago

This sounds closer to what I'm looking for, but it still doesn't fix the issue of there being multiple divs open at the same time. I only want one text div to be actively visible at a time.

G4MOOSE Over a year ago

Actually I do have a div wrapper around those divs, I never thought of that. Thanks again.

G4MOOSE Over a year ago

I'm not sure why, but that actually broke everything, nothing will fade in at all now; I'm not sure why it won't anymore though because that code looks like it should work... I was working on another work around which basically uses if/else statements to set and check a variable value to decide whether to proceed with the function right away but I needed to find a way to get the else to basically say "If var = 1, rerun the function until u get var = 0, which would trigger the if statement which then sets the value to 1 in the beginning and 0 at the end. Do you think this could work?

Emil Borconi Over a year ago

Are you sure you added the right class to each div? Can you create a fiddle? If / else workaround will put unnecessary complexity on the page.

G4MOOSE Over a year ago

Yea one second, Ill update this comment with the link in a minute. This is all code relevant to this issue: jsfiddle.net/tvnjwn70/1

|

Marcelo Luz · Accepted Answer · 2015-02-04 19:16:02Z

0

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)
   });

answered Feb 4, 2015 at 19:16

Marcelo Luz

4423 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related