Question

Consider the following scenario:

element.css({display:'none'});
element.slideDown(1000);
// ...
// here I want to get the final height

What is the right method to get the final value of an animation before it’s finished? If I access the css properties directly I get the current values. I simplified the case above. The actual code is not bound in the same function so I can’t just create a variable to hold that value for me to refer to later.

Thanks in advance.

EDIT:

I think I couldn’t express well what I’m trying to do.
My question, revised:

element.css({display:'none'});
element.slideDown(1000);

btn.click(function() {
    var finalHeight = element..?
    var str = 'height of the element will be ' + finalHeight;
    str += ' when the animation is complete';
    alert(str);
}

Consider clicking this button before the animation is completed.

Answer 1

When do you need the final height? If you need the height once the animation is complete, you can easily attach a callback function as second argument to .slideDown that reads the css properties (or $(this).height()) once the animation is complete.

If you want to predict the final height of the animation while it is still running, things are not so simple because AFAIK you can only access the computed height of elements that are already rendered by the browser, you cannot read the height of elements in future renderings. But if you hide the element before sliding it in, maybe you could attach the computed height (.height()) to the DOM-Element using .data() before you’re hiding it and then just read this value to get the final height.

Edit:

Actually, the things could be pretty simple: Just read the height of the element using css('height') before starting the animation (but after hiding it) and store the value using data: Look here for an example: http://jsfiddle.net/QNDcv/