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

Answer 3

The current version of your page doesn't appear to be working at all because you have something like

$("#content").children(".content")

instead of

$('#content').children('.content_box')

Fix that and it will be easier to troubleshoot...

EDIT (now that above fix is done):

It does seem like the fadeOut function is not working quite as documented, at least in Firefox 3.5, in regard to callbacks. I think what you probably want can be accomplished by using a little plain-old javascript:

$('#content').children('.content_box').fadeOut(fadetime);
window.setTimeout(function () { $('#events').fadeIn(fadetime); }, fadetime + 100);
return false;

I think that will more likely accomplish what you want by trying to ensure that the old content is gone and no longer actually taking up space before fading in the new content. Let us all know if it works for you.