javascript - 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({});