I have a Div that is 400px in height with the ID "content", I then do a slideToggle on the Div, load some data into the Div of a varying height e.g. 200px, and then do another slideToggle. What I get is the slide expanding to 400px, then jump back to 200px. And the same in reverse, expanding to 200px, then jump to 400px.

This is my code:

$('#content').slideToggle(600, function() {
    $("#content").load('data.php').slideToggle(600);
});

So I thought I could do something like this, which would slide up the content Div, load the data, and then after it's loaded slide back down. This doesn't jump like the above method, but it is quite jerky for some reason.

$('#content').slideUp(600, function() {
    $("#content").load('data.php', function() {
        $("#content").slideDown(600);
    });
});

Can anybody tell me if there is a better way of doing this so that I can slide it smoothly?