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.