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