In the following example, both fade events start at the same time. Seems to do with the first fade event including the 2nd.

Example (click 'go'):

Code:

1. <script type="text/javascript">
2.     function foobar(){
3.         $('.foo').fadeOut(800, function(){
4.             $('#bar').fadeIn(800);
5.         });
6.     }
7.     $(function(){
8.         $('#bar').hide();
9.         $('#go').bind('click',function(){foobar();});
10.     });
11. </script>
12. <div id="go">go</div>
13. <div class="foo">foo</div>
14. <div id="bar" class="foo">bar</div>