$(document).ready(function(){

    //When mouse rolls over
    $("div#overlay").mouseover(function(){
        $(this).stop().animate({height:'28px'},{queue:false, duration:100, easing: 'easeOutSine'})
    });

    //When mouse is removed
    $("div#overlay").mouseout(function(){
        $(this).stop().animate({height:'28px'},{queue:false, duration:1, easing: 'easeOutSine'})
    });
    $("div#overlay").mousedown(function(){
        $(this).stop().animate({height:'28px'},{queue:false, duration:800, easing: 'easeOutSine'})
    });

});