jQuery nested animations + AJAX

Question

I'm building a site and trying to initiate some animations, followed by content loading, followed by animations on a click. The idea is that user clicks, image fades in & then out, content area slides up, new content is loaded within, then content slides back down. When I run it on my test machine, it's fine, but once I upload it online, it gets buggy and animations start happening multiple times. I am using callbacks to "wait" for animations to complete, but something is wrong. Here's my code:

$('.nav li a').click(function(e){
        e.preventDefault();
        $url = $(this).attr('href');
        $rel = $(this).attr("rel");

        $('#brain-flash').fadeIn('fast',function(){
            $('#brain-flash').fadeOut('fast',function(){
                $('.highlight').fadeOut('fast',function(){
                    $('img[rel="'+$rel+'"]').fadeIn('fast', function(){
                        $('.copy').slideUp('slow',function(){
                            $('.copy').load($url+' p, h2, h3', function(){
                                $('.copy').slideDown('slow',function(){});
                            });
                        });
                    });
                });                 
            });                                  
        }); 



    });

It's not the prettiest code ever, but why would the slideUp/slideDown execute 2-3 times on each click? I tried adding .stop() in there but that messed it up even worse.