JQuery Animate not working

Question

For some reason I can' t seem to get .animate to function properly. Can anybody see why?

I'm using this a container div...

#valve-menu {
    position: absolute;
    width: 780px;
    top: 200px;
    background-color: #9C3;
    margin-right: 9px;
    margin-left: 10px;
}

then..

#control-cover{
    height: 50px;
    width: 180px;
    overflow: hidden;
    position: absolute;
    }
#control{
    background-color: #0C9;
    height: 200px;
    width: 180px;
    margin-right: 10px;
    position: absolute;
    }

My Jquery is this

$(document).ready(function(){

    //When mouse rolls over
    $("#control-cover").mouseover(function(){
        $(this).stop()
               .animate({height:'150px'},
                        {queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("#control-cover").mouseout(function(){
        $(this).stop()
               .animate({height:'50px'},
                        {queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

I want to have the control div partially hidden and then onmouseover expand.

Answer 1

This is working. If you're not using an Easing plugin there are only two available by default inside jQuery Swing and Linear: From jQuery website http://api.jquery.com/animate/

Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

    $(document).ready(function(){

        //When mouse rolls over
        $("#control-cover").bind('mouseover mouseenter',function(){
            $(this).stop()
            .animate({height:'150px'},
            {queue:false, duration:600, easing: 'swing'})
        });

        //When mouse is removed
        $("#control-cover").bind('mouseout mouseleave',function(){
            $(this).stop().animate({height:'50px'},
            {queue:false, duration:600, easing: 'swing'})
        });

    });