遮罩层特效(根据鼠标进入离开方向出现)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>遮罩层特效(根据鼠标进入离开方向出现)</title>
<script src="../../js/jquery-1.7.2.js"></script>
<script>
$(function(){
var $li=$(".wrap>ul>li");
$li.each(function(index, element) {
   var $this=$(this);
   var $cover=$this.find(".cover");
   $this.bind("mouseenter mouseleave",function(e){
       var w = $(this).width();
       var h = $(this).height();
       /* 判断移动方向direction有 0 1 2 3四个值代表4个方向 */
       var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
       var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
       var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

       var eventType = e.type;
       var dirName = new Array('上方','右侧','下方','左侧');
       var name=dirName[direction];
       if(eventType == 'mouseenter'){
           switch(name){
               case "上方": $cover.css({top:"-100%",left:0});break;
               case "右侧": $cover.css({left:"100%",top:0});break;
               case "下方": $cover.css({top:"100%",left:0});break;
               case "左侧": $cover.css({left:"-100%",top:0});break;
           }
           $cover.stop().animate({top:0,left:0},"slow");
       }else{
           switch(name){
               case "上方": $cover.stop().animate({top:"-100%",left:0},"fast");break;
               case "右侧": $cover.stop().animate({left:"100%",top:0},"fast");break;
               case "下方": $cover.stop().animate({top:"100%",left:0},"fast");break;
               case "左侧": $cover.stop().animate({left:"-100%",top:0},"fast");break;
           }
       }
   });
   })
})
</script>