根据鼠标移入移出方向，实现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();})