How do I use .load() with flexslider

Question

I'm trying to load content into a slider using .load() but I don't seem to be able to get it to work smoothly - with the code below, once the link is clicked the content fades out the footer shoots up to fill the space of the faded out content then a funny double flash of content, and finally the content loads.

The functionality I would like is: on click, get URL (and content via the selector) animate #slider to top of page, fade out the #slider, load content into it then fade #slider back in avoiding the footer jumping up due the slider being faded out.

My markup:

<div id="slider">

    <div class="flexslider">

      IMAGES / CONTENT

    </div>

</div>

and the jQuery so far

//Slider
$('a.test').click(function() {
    var address = $(this).attr('href');

    $('html,body').animate({
            scrollTop: $('#slider').offset().top
        }, 500, function() {

            $('#slider').animate({opacity: 0}, function(){

                $('.flexslider').load(address + ' .flexslider', function(){

                $('.flexslider').flexslider({
                animation: 'slide',
                smoothHeight: true,
            });

            }, function(){
                $('#slider').animate({opacity: 1});
            });

        });

    });

    return false;
});

Answer 1

Managed to get this working pretty well. Just need to add an extra div plus the following jquery.

$('a.test').click(function() {
    var address = $(this).attr('href');
    var slider_outer = $('#slider');
    var loadarea = $('#slider-inner');
    var current_height = slider_outer.innerHeight();
    slider_outer.css({
        "height": (current_height)
    });
    slider_outer.addClass('spinner');
    $('html,body').animate({
        scrollTop: slider_outer.offset().top
    }, 200, function() {
        loadarea.animate({
            opacity: 0,
            display: 'block',
            visibility: 'hidden'
        }, 500, function() {
            loadarea.load(address + ' .flexslider', function() {
                $(this).animate({
                    opacity: 1.0
                }, 500, function()
                          slider_outer.removeClass('spinner');
                          $('.flexslider').flexslider({
                        animation: 'slide',
                        smoothHeight: true,
                        easing: 'swing',
                        animationSpeed: 500,
                        slideshowSpeed: 10000,
                        touch: true,
                        prevText: '',
                        nextText: '',
                        start: function(slider) {
                            $('.flex-control-nav').fadeIn(500);
                            $('.total-slides').text(slider.count);
                            $('.current-slide').text(slider.currentSlide + 1);
                            slider_outer.removeAttr('style');
                        },
                        after: function(slider) {
                            $('.current-slide').text(slider.currentSlide + 1);
                        }
                    });
                });
            });
        });
    });
    return false;
});

and the html

<div id="slider">

   <div id="slider-inner">

        <div class="flexslider">

          IMAGES / CONTENT

        </div>

    </div>

</div>

I'd like it to be smoother so if anyone can see a better / smoother way of doing this that would be great. I'll try and get a demo working for Googlers.