Question

I’m having problems with the jQuery .height() function.

Final result should be an div with an dynamic height as the text changes. Therefore I have an wrapper div and an content div inside that wrapper. The text is in hidden div’s somwhere else in the DOM, and ‘imported’ with .html() function and an simulated fadeIn/Out with setting the opacity to 0 and then back to 1.

When I try to change the content, the wrapper resizes, but with the old height value. I just can’t manage to get the current value of the content div…

This is where the magic should happen…

nav.click(function() {
    contDiv.animate({opacity:0}, 200, function() {
        contDiv.html(currCont);
        contDiv.animate({opacity:1}, 200);
    });

    wrapper.animate({height:contDiv.height()},200);
});

Answer 1

As @MrOBrian says, you are animating to the height before the div has its contents, you may need to call this animation in a callback function as follows:

nav.click(function() {
    contDiv.animate({opacity:0}, 200, function() {
        contDiv.html(currCont);
        wrapper.animate({height:contDiv.height()},200);
        contDiv.animate({opacity:1}, 200);
    });
});