Jquery确定鼠标进入div的方向

原文地址

$(".overlayLink").bind("mouseenter mouseleave",function(e){

/** the width and height of the current div **/
var w = $(this).width();
var h = $(this).height();

/** calculate the x and y to get an angle to the center of the div from that x and y. **/
/** gets the x value relative to the center of the DIV and "normalize" it **/
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 );

/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
/** first calculate the angle of the point, 
 add 180 deg to get rid of the negative values
 divide by 90 to get the quadrant
 add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4;


/** do your animations here **/ 
switch(direction) {
 case 0:
  /** animations from the TOP **/
 break;
 case 1:
  /** animations from the RIGHT **/
 break;
 case 2:
  /** animations from the BOTTOM **/
 break;
 case 3:
  /** animations from the LEFT **/
 break;
}});

我们在百度图片和拉钩的滚动广告下面可以发现这类js效果

分析一下CSS代码，_slide层也就是.hot_info并不是一开始就是display:none的，而是通过相对定位控制好li，然后绝对定位使得_slide层被挤到下面，然后overflow:hidden将他隐藏起来。
分析一下JS代码，
_slide.css("transition", "").css("top", "0px").css("left", "-100%");
_slide.show().css("top", "0px").css("left", "0px").css("transition", "all 300ms ease");
我们可以看到，这两句的意思很明显，在从一个边缘进入的时候，必须先把滑动层调增到这一边来，然后让他执行css3滑入效果
但是如果不给show加上setTimeOut的话，这两句话放在一起写，就会变成_slide.css("transition", "").css("top", "0px").css("left", "-100%").show().css("top", "0px").css("left", "0px").css("transition", "all 300ms ease");
区别就是，结果只执行了show以及后面的css而不会因为前面改变了一次而改变。

所以这里就有js的改变相同样式的时候，需要将后面的一次操作放在另外一个方法里，或者setTimeOut一次，然后执行前必须把这个clearTimeOut掉！！！