Jquery ajax load before animate

Jquery ajax load before animate

Hi, I have a grid of thumbnails. On click, a div below slides down and loads the content with ajax.

The problem: When I click on a thumbnail it doesn't slide down smoothly. The content just appears. However, when I click another thumbnail, it slides up the old content and slides down the next smoothly. It seems that the reason it doesn't slide down the first time is because the div container is still empty when the slidedown is called. How do I fix this? If I set a fixed height to the div then it works nicely but I need the height to adjust to each pulled page accordingly.

Code:
  1. var hash = window.location.hash.substr(1);
        var href = $('.work-item a').each(function(){
            var href = $(this).attr('href');
            if(hash==href.substr(0,href.length-5)){
                var toLoad = hash+'.html #content-post > *';
                $('#content').load(toLoad)
            }                                           
        });

        $('.work-item-hover').click(function(){
                                     
            var toLoad = $(this).attr('href')+' #content-post > *';
            $('#content-post').slideUp('normal',loadContent);
            $('#load').remove();
            $('.content-post-wrap').append('<span id="load">LOADING...</span>');
            $('#load').fadeIn('normal');
            window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
            function loadContent() {
                $('#content-post').load(toLoad,'',showNewContent())
            }
            function showNewContent() {
                $('#content-post').slideDown('slow',hideLoader());
            }
            function hideLoader() {
                $('#load').fadeOut('normal');
            }
            return false;
        });    


























Thanks!
Yan