Question

i made a script that dynamically loads content into a div and whenever the content makes the div’s height bigger or smaller it animates the height to the actual height.

The problem is that it doesn’t only slide up/down it always slides a bit up and then down to the desired height.

I’d like to make it slide directly at the desired height without the “bouncing”.

Here’s part of the script:
main_content.html(html);

main_content.css("height", "auto");
var newContentHeight = main_content.height();
loader_div.hide();
main_content.height(prevContentHeight);
main_content.fadeIn("fast", function() {
    main_content.animate({
        "height": newContentHeight
        }, 300);
    });

The script works, the only problem is that the animation doesn’t slide the div up or down to the desired height, it always slides it a bit up and then down to the desired height.

Is it some kind of wanted animation when using animate height or is there something wrong?
Thanks

edit: console logging newContentHeight(the final height of the div) it looks like it gathers 2 heights, then the animate first goes to one of them and then to the other one that’s why it looks like bouncing. Working on it.

edit2: yes the problem is definitely there, i cleaned up all the code and everything works except that i get 2 attributes from newContentHeight using console.log it looks like the content div that is hidden has 2 heights and those 2 heights are passed to the .animate that’s why it first goes up and then down…
Kinda strange

Answer 1

Couldn’t solve the problem, i modified the script below and now everything works like it should.
http://css-tricks.com/dynamic-page-replacing-content/
It has the exact animation i was looking for(except for a couple of steps easily implementable).