jQuery animation for a hover with 'mouse direction'

Question

I\'m trying to simulate the effect where I hover on an image an overlayed semi-transparent image will fade in from the direction where your mouse came from. Vice versa when your

Answer 1

If I were going to implement this functionality, here's how I'd approach it:

1. Create image map areas defining the top, bottom, left, and right borders for the image.
2. For each image where you want this intelligence (i.e. what side was it entered on, what side was it departed from): a) track the sideEntered -- this value is assigned once and only once; whenever an image-map border area is entered its mouseover handler will consult sideEntered and assign it only if it has not yet been assigned; b) track the lastSideTouched -- whenever an image map area is entered its mouseoverhandler reassigns this variable c) when the mouse leaves the rectangle, the leave handler consults lastSideTouched and resets sideEntered to null

Each rectangle should have its own handlers so the two important values, sideEntered and lastSideTouched, are encapsulated within the scope of its handler.