带有jQuery效果的Ajax

Question

I'm trying to incorporate jQUery effects with AJAX in the following way:

<script>
    $('#navbar a').click(function(){
        var url=$(this).attr('href');
        $('#innerwrap').hide("slide",{direction:"down"},1000).load(url + ' #innerwrap').show("slide",{direction:"up"},1000);
        return false;
    });
</script>

Essentially, each of my html files have an innerwrap div that holds all of the content.

I want the current #innerwrap to slide down then the next #innerwrap in the clicked navbar location to slide up. Now I know the code's not completely broken because the content DOES gets loaded, but the effect just doesn't seem to happen.

I have other cool jQuery effects on my homepage like a slider and some hover effects for specific divisions. Could they all be conflicting with the AJAX jQuery effect?