jQuery: slideDown jumpy after slideUp — height problem?

This is a common problem, outlined here and here, however I can't find a solution to it.

I have a container (#a) that I load external files into. First the current content is hidden with a slideUp function, then the new content is loaded and finally the container appears with a slideDown. However the animation is jumpy because when it slideDown it calculates the height of the previous content. How can I make it calculate the height of the new content instead?

You can see the problem in action here (click one of the three first开发者_如何学运维 links in the left column) and here is the jQuery:

$('.kolonne a').click(function() {

    var url = $(this).attr('rel');
        $('#a').slideUp(function() {
        $(this).load(url); 
    }); 

    $('#a').slideDown();

}); 

---

my guess is that you need to make the slideDown only after the content is loaded, try a callback like this:

$('.kolonne a').click(function() {

    var url = $(this).attr('rel');
        $('#a').slideUp(function() {
        $(this).load(url, function() {
           //done
           $('#a').slideDown();
        });
    }); 
});