jQuery滑鼠移入移出

• 很多時候需要停止匹配元素正在進行的動畫，比如，當滑鼠選入元素時顯示選單，滑鼠離開時隱藏下拉選單，如果滑鼠移入移出過快的話就會導致動畫效果與滑鼠的動作不一致的情況，此時stop()就派上用場了

/*進入子元素也觸發*/
            $('#div1').mouseover(function() {
                
        $(this).animate({marginTop: 50});//.stop()
            });
            $('#div1').mouseout(function() {
                $(this).animate({marginTop: 100});//.stop()
            });

            /*進入子元素不觸發*/
            $('#div1').mouseenter(function() {
                $(this).stop().animate({marginTop: 50});//加入stop()
            });
            $('#div1').mouseleave(function() {
                $(this).stop().animate({marginTop: 100});//
            });

            /*通過hover（mouseenter+mouseleave）實現簡寫*/
            $('#div1').hover(function() {
                $(this).stop().animate({marginTop: 50});
            }, function() {
                $(this).stop().animate({marginTop: 100});
            });
        })