How to copy an element's height to another element?

Question

I have a div that has padding only and i have another div without any css attribute.
I want to give the same height to both divs using outerHeight.

This is my test, this works but not perfectly: http://jsfiddle.net/A2bNm/6/

$("#container").mouseenter(function () {
        $("#top").animate({ 'padding' : 70 }, "slow");
        $("#bottom").animate({'height':($("#top").outerHeight())}, "slow");

    }).mouseleave(function () {
        $("#top").animate({ 'padding' : 20}, "slow");
        $("#bottom").animate({'height':($("#top").outerHeight())}, "slow");
});

Can help? Thank you and sorry for my bad english! :)

Answer 1

Try referring to your divs with their current name this and with the other's name .closest('div) or .siblings('div').

http://api.jquery.com/siblings/ http://api.jquery.com/closest/

Also, perhaps store the required height as an independent variable, so it's not based on the #top's current value (which changes).