Animate height and toggle display

Animate height on mouseenter/mouseleave and toggle on click (toggle = show/hide). Source: http://www.codecademy.com

by clarusdignus

HTML

<div id="red"></div>
<div id="blue"></div>
<div id="yellow"></div>
<div id="green"></div>

CSS

div {
    height:100px;
    width:100px;
    display: inline-block;
}

#red {
    background-color:#FF0000;
}

#blue {
    background-color:#0000FF;
}

#yellow {
    background-color:#E2BE22;
}

#green {
    background-color:#008800;
}

JavaScript

$(document).ready(function() {
   $('div').mouseenter(function() {
       $(this).animate({
           height: '+=10px'
       });
   });
   $('div').mouseleave(function() {
       $(this).animate({
           height: '-=10px'
       }); 
   });
   $('div').click(function() {
       $(this).toggle(1000);
   }); 
});