jquery - jQuery：easeoutbounce 在鼠标移出时不起作用

Question

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

我正在尝试为easeOutBounce产生效果的标题设置动画，当鼠标离开时，它会随着10px高度隐藏。

我没有完成这件事，请告诉我这出了什么问题？

小提琴为此- 小提琴

我无法10px在下一个功能上设置高度，我尝试了第二个 mouseout 功能，但这不起作用。

Answer 1

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

小提琴 - http://jsfiddle.net/atif089/bbKyG/3/

Answer 2

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