Animating div height on rollover

Animating div height on rollover

This is a pretty simple question, however, I am no familiar with jquery yet, so simple is not easy for me.

All I needs is for one div to have an animated height when another div is rolled over.

Example:

<div class="button"></div>
<div class="animatedBox"></div>

So basically, I want the "animatedBox" div to have an animated expansion in height when the "button" div is rolled over. When the "button" div is rolled out, I would for the "animatedBox" div to go back to the original height. Let's go ahead and say the original height is 20px and when the "button" div is rolled over, the height changes to 50px.