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