jQuery：easyoutbounce无法在mouseout上工作

Question

 $(function(){
    $('.header').on('mouseover',function(){
    $(this).animate({height:"200px"},500,'easeOutBounce');
    },
    function(){
$('header').on('mouseout',function(){
$(this).animate({height:"10px"},500,'easeOutBounce');
});
});
});

I am trying to animate header that comes out with easeOutBounce effect and when mouse is out, it goes hidden with 10px height.

I am not getting this done, please let me know what went wrong in this?

Fiddle for this- Fiddle

I am not able to set the height 10px on next function, i tried with second mouseout function but this didn't work.

Answer 1

$(function () {
    $('.header').hover(function () {
        $(this).stop().animate({
            height: "200px"
        }, 500, 'easeOutBounce');
    }, function () {
        $(this).stop().animate({
            height: "10px"
        }, 500, 'easeOutBounce');
    });
});

Fiddle - http://jsfiddle.net/atif089/bbKyG/3/

Answer 2

 $( "#clickme" ).click(function() {
  $( "#book" ).animate({
    height: "toggle"
  }, {
    duration: 2000,
    specialEasing: {
      height: "easeOutBounce"
    },
  });
});