jQuery Smooth Sliding DIV Height

Question

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?

Answer 1

I had a similar problem. I was able to correct this issue by setting the div height before sliding up.

Example:

$("#myDiv").height($("#myDiv").height());
$("#myDiv").slideUp();

Answer 2

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

This produces the best results.