JQuery: element - get final css values ​​during animation

Question

Consider the following scenario:

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

What is the correct way to get the final animation value up to . If I immediately access the css properties, I get the current values. I have simplified the above case. The actual code is not bound in the same function, so I cannot just create a variable to hold this value for me later.

Thanks in advance.

EDIT:

I think that I could not express well what I am trying to do. My question is 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 completing the animation.

Answer 1

When do you need the final height? If you need height after the animation finishes, you can easily attach the callback function as the second argument to .slideDown , which reads the css (or $(this).height() ) properties after the animation finishes.

If you want to predict the final height of the animation while it is still working, things are not so simple, because AFAIK you can only access the calculated height of elements that are already displayed by the browser, you cannot read the height of elements in future visualizations. But if you hide the element before inserting it, perhaps you could attach the calculated height ( .height() ) to the DOM-Element with .data() before hiding it, and then just read that value to get the final height .

Edit:

Actually, everything can be quite simple: just read the element height using css('height') before starting the animation (but after hiding it) and save the value using data : Look here for an example: http://jsfiddle.net / QNDcv /

Answer 2

The usual way is to use the slideDown function:

 element.slideDown(1000, function() { var h = $(this).height(); // Now do things with 'h'. }); 

Demo: http://jsfiddle.net/ambiguous/P47Cj/1/

Answer 3

Use the jQuery height function.

element.height ();