根據鼠標移入移出方向，實現hover效果

首先，我們要判斷鼠標移入對象的方向：
先獲取該對象的左邊距，然后通過判斷鼠標距離上面、左面、右面、下面的值的最小值，來獲取鼠標移入對象的方向。

JS代碼：
;(function($){
$.fn.extend({
    dirMove:function(){
        var $outer=this;
        var $mask=this.find("#mask");

        var disL = $outer.offset().left;
        var disT = $outer.offset().top;
        var disR = disL + $outer.outerWidth();
        var disB = disT + $outer.outerHeight();

        $outer.hover(function(e){
            Confirmdir(e);   
        },function(e){
            Confirmdir(e);
        });

        function Confirmdir(e){  //確定具體鼠標移入對象的方向
            var dirL = Math.abs(e.pageX - disL);
            var dirT = Math.abs(e.pageY - disT);
            var dirR = Math.abs(e.pageX - disR);
            var dirB = Math.abs(e.pageY - disB);

            var dir = Math.min(dirL,dirT,dirR,dirB);//取得最小值

            if(e.type=="mouseenter"){
                switch(dir){
                    case dirL:
                        mouseIn("left");
                        break;
                    case dirT:
                        mouseIn("top");
                        break;
                    case dirR:
                        mouseIn("right");
                        break;
                    case dirB:
                        mouseIn("bottom");
                        break;
                }
            }else{
                switch(dir){
                    case dirL:
                        mouseOut("left");
                        break;
                    case dirT:
                        mouseOut("top");
                        break;
                    case dirR:
                        mouseOut("right");
                        break;
                    case dirB:
                        mouseOut("bottom");
                        break;
                }
            }

        }

        function mouseIn(dir){
            switch(dir){
                case "left":
                    $mask.css({"left":-$outer.outerWidth(),"top":0}).show().stop(true,true).animate({"left":0});
                    break;

                case "top":
                    $mask.css({"left":0,"top":-$outer.outerHeight}).show().stop(true,true).animate({"top":0});
                    break;

                case "right":
                    $mask.css({"left":$outer.outerWidth(),"top":0}).show().stop(true,true).animate({"left":0});
                    break;
                case "bottom":
                    $mask.css({"left":0,"top":$outer.outerHeight}).show().stop(true,true).animate({"top":0});
                    break;
            }
        }

        function mouseOut(dir){
            switch(dir){
                case "left":
                    $mask.stop(true,true).animate({"left":-$outer.outerWidth()});
                    break;

                case "top":
                    $mask.stop(true,true).animate({"top":-$outer.outerHeight()});
                    break;

                case "right":
                    $mask.stop(true,true).animate({"left":$outer.outerWidth()});
                    break;
                case "bottom":
                    $mask.stop(true,true).animate({"top":$outer.outerHeight()});
                    break;
            }
        }
    }
})
})(jQuery);

HTML代碼：

$(".outer").each(function(){
            $(this).dirMove();
})