jQuery hover animation will not hide text

Question

I'm using jQuery for hover over effects. I plan on expanding it from what it is now but I'm having a issue. The issue is I want to hide some text until you hover over that div and then it will show it. Then once you move to a different div it will hide it again?

This is what I have so far. http://jsfiddle.net/UDFw7/

CSS

.divname {
height: 20px;
width: 300px;
border: 1px solid black;
}

javascript

$('.divname').hover(function() {
$(this).animate({
    height: '40px'
}, 300);
},function() {
$(this).animate({
    height: '20px'
}, 300);
});

HTML

<div class='divname'>Text Here</div>
<div class='divname'>Text Here <br /> Hidden text until hover over</div>
<div class='divname'>Text Here</div>

Answer 1

Add overflow: hidden; to .divname