jQuery ajax slidedown after load

Question

I have a grid of thumbnails each linking to it's own post page. On click, a container div below slides down and loads the content with ajax.

The problem: When I click on a thumbnail the first time, it doesn't slide down smoothly. The content just appears. However, when I click a second time on another thumbnail, the container slides up and slides down with the new content 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.

Thanks so much!

Code:

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;
});    

Answer 1

You could make it slide after the ajax loads the content with the .ajaxComplete() method. Something like this:

$(document).ajaxComplete(function(){
   $('#content-post').slideDown('slow',hideLoader());
});