[jQuery] Having troubles loading Ajax content with effects

[Matt81]

Hi there. I'd be very grateful if anyone could take the time to help
me with a problem I'm having attaching effects to the jQuery load
method.

On this site http://www.ascent-interactive.co.uk/testing2/dev2.html,
when a navigational link is clicked (About the Debate in the top nav),
I use the code below to hide/show a pre-loader image, and then hide
the layer in which my ajax content will be loaded, load in the
content, and then fade-in the content. In theory, I believe this
approach should work fine, however, as can be seen on the site, the
content is not being faded-in properly, the fade-in appears to be
happening asynchronous to the content being loaded in.

I've tried a numerous approaches (with callbacks within the .load etc)
but I achieve the same result every time (much to my frustration), so
any help in solving this issue would be really appreciated.


        <script type="text/JavaScript">
                $(document).ready
                (
                        function()
                        {
                                $('#loader').hide();
                                
$('#loader').ajaxSend(function(){$(this).show();})
                                .ajaxStop(function(){$(this).hide();});

                                $("ul.navigation a").click
                                (
                                        function()
                                        {
                                                
$('.overlay_layer').ajaxSend(function(){$(this).hide()})
                                                .load("about_the_debate.html")
                                                
.ajaxComplete(function(){$(this).fadeIn("slow")});
                                                return false;
                                        }
                                );
                        }
                );
        </script>