How to get div height after the action slider down or slider up?

Question

Code in here: jsfiddle Demo

I wanna to get the div#content height when it finish the action of slider down/up.

For example, in demo, I type some words, they make the div height is 36px, so if I click slider down, I need get the value 36, and if I click slider up, I need return the value 0. Thanks.

Answer 1

Then, but it in the callback function of the slideDown or slideUp, for example like:

 $('#content').slideDown('slow', function(){
        var height = $(this).height();
  }); 

Demo

Notice that it will give you the same height 38 in the two cases the slideDown and the slideUp, becouse the two functions don't change the height property of the div, but only the display proprty from none to block, so the div #content's height property is the same after slideing down as it's height before.

Answer 2

I know that this is an old thread, but it came up first when I searched for this so I assume others will land here as well.

Using the callback is what I do if I need the value after the animation completes, but in my use case, I needed the height before the animation so I could expand another element to the same height. For this, I did the following:

//Get height (start and end)
var startHeight = $el.height();
$el.show();
var endHeight = $el.height();
$el.hide();

/**Do something useful with the height here**/
$el2.animate({height: endHeight});

//Slide the element down
$el.slideDown();

Because JavaScript is single threaded, the show/hide is never rendered.