jQuery animation for a hover with 'mouse direction'

Perhaps you shoud consider not to use the divs as "hotspots" but use some Math and Javascript to find the point where the mouse enters and leaves a div. This avoids overlapping/gaps problems. The code below basicaly divides a div in 4 triangled zones. Each zone returns a number when the mouse moves over it. The code needs some finetuning, and you have to decide for yourself where to bind and unbind the events. But I think it takes away most of your flickering problems.

$(".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.offset().left - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - this.offset().top  - (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;
}});

of course the short notation to get the direction should be:

var direction =  Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4

where 1.57... is Math.PI / 2 This is much more efiicient bit harder for me to explain since it skips the degrees conversion.

Fundamentally, mouse movement events happen as a sequence of dots not as a curved line as we perceive the movement on the screen. The faster you move the mouse the wider the spacing between the dots and the larger the objects the mouse can move over without touching. So ideally you need to know the direction of the last mouse position prior to landing on your object and from that calculate the direction from which it approached. i.e. You need to constantly track the mouse position on the whole page to be certain of getting your effect to work correctly every time.