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