Estoy tratando de simular el efecto donde paso el mouse sobre una imagen, una imagen semitransparente superpuesta se desvanecerá desde la dirección de donde vino su mouse. Viceversa, cuando el mouse deja la imagen (desvanecimiento + se aleja)

He preparado unpágina de prueba para esto. Continúa y échale un vistazo, aclarará cuál es el efecto deseado.

He definido una estructura HTML para esto:

    <div class="overlayLink">
        <img src="assets/work/thumbnails/kreatude.jpg" alt="Kreatude" />
        <div class="overlayLink_overlay_bg">&nbsp;</div>
        <div class="overlayLink_overlay_fg">
            <span class="overlayLink_overlay_link"><a href="#">View Case Study</a></span>
            <div class="top">&nbsp;</div>
            <div class="left">&nbsp;</div>
            <div class="right">&nbsp;</div>
            <div class="bottom">&nbsp;</div>
        </div>
     </div>

y el siguiente JS (estoy usando jQuery):

jQuery(document).ready(function () {
    ourWork();
});

function ourWork(){
    var inHandler = function(){
        var blue_bg = jQuery(this).find('.overlayLink_overlay_bg');
        var divClass = inClass;

        blue_bg.stop(true,true).fadeIn();
        var ml,mt;
        if(divClass == 'left'){
            ml = -260;
            mt = 0;
        }
        else if(divClass == 'right'){
            ml = 260;
            mt = 0;
        }
        else if(divClass == 'top'){
            ml = 0;
            mt = -140;
        }
        else if(divClass == 'bottom'){
            ml = 0;
            mt = 140;
        }       

        //positioning
        jQuery(this).find('a').css({
            'marginLeft': ml + 'px',
            'marginTop' : mt + 'px'
        });


        //animation
        jQuery(this).find('a').stop(true,true).animate({
            "marginLeft": "0px",
            "marginTop": "0px"
        }, "slow");
    }
    var outHandler = function(){
        var blue_bg = jQuery(this).find('.overlayLink_overlay_bg');
        var divClass = outClass;

        blue_bg.stop(true,true).fadeOut();
        var ml,mt;
        if(divClass == 'left'){
            ml = -260;
            mt = 0;
        }
        else if(divClass == 'right'){
            ml = 260;
            mt = 0;
        }
        else if(divClass == 'top'){
            ml = 0;
            mt = -140;
        }
        else if(divClass == 'bottom'){
            ml = 0;
            mt = 140;
        }        

        //animation
        jQuery(this).find('a').stop(true,true).animate({
            "marginLeft": ml + "px",
            "marginTop": mt + "px"
        }, "slow");

    }

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

    jQuery('.overlayLink').mouseenter(inHandler).mouseleave(outHandler);
}

explicación:

Básicamente tengo cuatro divs posicionados en la parte superior de la imagen para saber la dirección (izquierda, arriba, abajo, derecha) cuando paso el mouse sobre uno de esos 4 div (.overlayLink_overlay_fg div) pongo el nombre de clase del div suspendido en un variable (var inClass y var outclass)

Una vez que paso el mouse sobre el div que cubre el área de la imagen (.overlayLink) solicito la dirección de la variable inClass o outClass y realizo la animación (inHandler, outHandler)

sin embargo, todo esto parece funcionar, es un poco problemático cuando mueves el mouse muy rápido,ahora estoy preguntando cuál es el problema (que está causando los problemas técnicos) y cómo podría solucionarse con mi código actual.

Gracias por adelantado