mouseenter和mouseleave的动画停止

Question

我正在使用mouseenter和mouseleave进行动画制作，问题是如果我在div上快速通过鼠标，动画会变得疯狂，就像重复而不停止一样，我该如何修复它，任何一种停止什么？

这是我的代码：

    /* Footer Hover */
    function footerhover(){
        var footer = $('#footer')
        footer.bind({
            'mouseenter' : function(){
                footer_animate(200);
                footer_bottom(145);
            },
            'mouseleave' : function(){
                footer_bottom(0);
                footer_animate(40);
            }
        })
    }
    function footer_animate(h){
        $('#footer').animate({
            height: h
        }, 50 );
    }
    function footer_bottom(b){
        $('#footer').animate({
            bottom: b
        }, 300 );
    }

Answer 1

最好使用jQuery的stop函数在开始新动画之前停止当前动画，否则它们会堆积起来并反复点火。因此，每次为页脚设置动画时，请先将其停止。

$('#footer').stop().animate({});