Jquery animations

I'm trying to build simple javascript-based navigation that will display different content each time user clicks one the of links in the navbar.

The content stored in separate HTML files that containing only specific article wrapped in "description" div:

Each link on the navbar has the url to proper content file.


I'm using following jquery code to place content in response of user clicks:


The code working fine, but (to improve user experience) i want to make an fadeIn -fadeOut animation: I want the content fade out and after, the other content fade in.
Its looks like this code will do the work:

Looks like, but not.
The new content appears in the content panel even before the fading out starts.
The 'load' function didnt wait to 'fadeOut' to finish.
Here is some solution to fix this:

Now the 'load' is inside the 'fadeOut' - that means it will happen in the end
of fade out animation
[Download code]