CSS3 height anim -

Possible use on menu

by Andrew Pougher

HTML

<div class="cool" id="blik">menu item</div>   <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700' rel='stylesheet' type='text/css'>

CSS

#blik
{
    text-align:center;
    font-weight:bold;
    font-size:30px;
    font-family:'Josefin Sans',sans-serif;font-weight:300;
line-height:95px;    text-transform:uppercase;
    color:white;
    background-color:red;height:100px;width:90%;
       -webkit-transition: all 1.15s ease-in-out; 
       -moz-transition: all 1.15s ease-in-out;
         -o-transition: all 1.15s ease-in-out;
            transition: all 1.15s ease-in-out;
}


.abc {
    height:200px !important;
    background-color:blue !important;
}

JavaScript

$("div.cool").click(function(){
    $(this).addClass('abc');
});

$("div.cool").on("mouseout",function(){
    $(this).removeClass('abc');
});