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高度隐藏。

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

小提琴 - Fiddle

我无法在下一个功能上设置高度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"
    },
  });
});

jQuery：easeoutbounce不能用于mouseout

2 个答案: