Jquery: function running before fadeOut Complete

Question

I'm having an issue with my jquery script... should an easy task, but having some strange behaviours that I can't figure out.

When I click on a link, I want my content to disappear, then the new content to reappear. All content is stored in tags.

Here's what I'm using:

$("#events_link").click(function() {
   $("#content").children(".content").fadeOut(fadetime, function() {
      $("#events").fadeIn(fadetime);
   });
   return false
});

However, the fadeIn is not waiting until the content has faded out.

My full page is here (all code/script on one page):

http://dl.dropbox.com/u/4217965/HorrorInTheHammer/index.html

Any thoughts?

Answer 1

This will run for each of the .content_box elements...and the hidden ones will finish their animation immediately, so you want is this:

$("#events_link").click(function() {
   $("#content > .content_box:visible").fadeOut(fadetime, function() {
      $("#events").fadeIn(fadetime);
   });
   return false
});

The important change is the :visible selector, so only the visible one is faded out...and triggers the callback to show the next one.

Answer 2

windows.setTimeout is not always useful because sometimes the process might take more time than the timeout you have set. So it's better to use following code to run fadeIn only after fadeOut is done.

$("#events_link").click(function() {
   $.when(
      // Your function which you want to finish first
      // $("#content").children(".content").fadeOut(fadetime)
   ).done(function() {
      // The function which you want to run after finishing the previous function
      // $("#events").fadeIn(fadetime);
   });
   return false
});*