How to extend an HTML element with Javascript? -

i have div 50x100 pxs , want extend height 125 pxs when mouse enters it. div's class name home. here's have far:

$(document).ready(function(){     $('.home').mouseenter(function(){         $('.home').animate({height: "125px"})     }) }); 

it doesn't seem doing anything. wrong or missing 1 element or something?

you can css3

html:

<div class="home"> la la la la la </div> 

css:

.home{ height: 100px; background: red; color: #fff; width: 50px; transition: height .5s ease-in-out; -webkit-transition: height .5s ease-in-out; cursor: pointer; } .home:hover{     height: 125px; }