jQuery Forum

1. $('#navigation li a').click(function(e){
2.       e.preventDefault();
3.       var toLoad = $(this).attr('href') + ' #MainContent';
4.       $('#MainContent').fadeOut(2000, function() {
5.             $(this).load(toLoad, function() {
6.                   $(this).fadeIn(2000);
7.             });
8.       });
9. });

While it looks like a similar methodology you might find that waiting until each function is completed before the callback is invoked that the problem goes away. When you click on yours above every thing gets run without waiting - in other words the click will fire the loadContent function, perhaps before the first time it is called in your fadeOut method.

2. $(document).ready(function () {
3. 
   
4.     $('#navigation li a').click(function () {
5. 
   
6.         var toLoad = $(this).attr('href') + ' #MainContent';
7.         $('#MainContent').fadeOut('2000', loadContent);
8. 
   
9.         function loadContent() {
10.             $('#MainContent').load(toLoad, '', showNewContent())
11.         }
12.         function showNewContent() {
13.             $('#MainContent').fadeIn('2000');
14.         }
15. 
    
16.         return false;
17. 
    
18.     });
19. }); 

1. $(document).ready(function(){
2.       $("#navigation li a").click(function () {
3.             var req = $.get(toLoad);
4.             $("#MainContent").fadeOut(2000);
5.             req.done(function(data){
6.                   $("#MainContent").stop(true,true).hide().html(data).fadeIn(2000);
7.             });
8.       });
9. });