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

• What the problem is (that's causing the glitches)

This code (and the use of inClass & outClass) are problematic. You are changing the state of global variables that are used in the event handlers.

var inClass, outClass; 
jQuery('.overlayLink_overlay_fg div').hover(function(){         
    inClass = jQuery(this).attr('class'); 
},function(){        
    outClass = jQuery(this).attr('class'); 
}); 

This code assumes that outClass was set by the 'local' div, but coulsd have been set by a neighboring top div

    var outHandler = function(){        
    var blue_bg = jQuery(this).find('.overlayLink_overlay_bg');        
    var divClass = outClass;   

• how [could] it could be fixed with my current code?

Do not manage this as a single, global variable, try managing it with Isolated mannor.

Here is one apprach: I have not tested this code

    jQuery('.overlayLink_overlay_fg div').hover(function() {
        jQuery(this).parents('.overlayLink').attr('mouseEnterClass', jQuery(this).attr('class'));
    }, function() {
        jQuery(this).parents('.overlayLink').attr('mouseLeaveClass', jQuery(this).attr('class'));
    });

In your handlers, refrence this new data.

    var outHandler = function() {
        var blue_bg = jQuery(this).find('.overlayLink_overlay_bg');
        var divClass = jQuery(this).attr('mouseLeaveClass');
        ....
      }

this woulod address the global variable issue. I am not sure what will happen if the 'hover' event occurs before the animation completes.

EDIT: Fixed issues with code.