動畫化mouseenter和mouseleave stop

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