CODEWITHSUNDEEP
javascriptjqueryjquery-animate
Andy Dwyer
Andy Dwyer

Reputation: 716

How to animate div using jQuery to the height of another div

I have a div called .A coded as height:auto that has a height rendered based on the text contained within. I have another div on the page called .B that I need to animate down using jQuery based on the height of the first div, .A.

I have attempted using the following jQuery function, without much luck. The idea was to have jQuery ascertain the height of .B then apply a padding to .B, however it is not grabbing the correct height. I have also tried using 'marginTop'

jQuery('div.A').animate({'paddingTop': jQuery('div.B').height()},500);

Desparate for help! Will pay with up-votes and generous compliments.

Upvotes: 0

Views: 144

Answers (1)

Jai
Jai

Reputation: 74738

I think you need .outerHeight(true):

jQuery('div.A').animate({ paddingTop : jQuery('div.B').outerHeight(true)},500);

Description for .outerHeight() from docs

Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.

Note:

The top and bottom padding and border are always included in the .outerHeight() calculation; if the includeMargin argument is set to true, the margin (top and bottom) is also included.

Upvotes: 1

Related Questions