title: jQuery animation for a hover with 'mouse direction'
body: <p>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 mouse leaves the image (fadeout + moves away)</p>
  
  <p>I've prepared a <a href="http://www.monkify.com/test" rel="noreferrer">test page</a> for this. Go ahead and check it out, it will clarify what the desired effect is.</p>
  
  <p>I have defined a HTML structure for this:</p>
  
  <pre><code>    &lt;div class="overlayLink"&gt;
          &lt;img src="assets/work/thumbnails/kreatude.jpg" alt="Kreatude" /&gt;
          &lt;div class="overlayLink_overlay_bg"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div class="overlayLink_overlay_fg"&gt;
              &lt;span class="overlayLink_overlay_link"&gt;&lt;a href="#"&gt;View Case Study&lt;/a&gt;&lt;/span&gt;
              &lt;div class="top"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;div class="left"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;div class="right"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;div class="bottom"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>and the following JS (I'm using jQuery):</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p><strong>explanation:</strong></p>
  
  <p>Basically I have four absolute positioned divs on top of the image to know the direction (left,top,bottom,right) when I hover on one of those 4 div's (.overlayLink_overlay_fg div) I put the class name of the hovered div in a variable (var inClass and var outclass)</p>
  
  <p>Once I hover over the div who covers the area of the image (.overlayLink) I request the direction from the inClass or outClass variable and perform the animation (inHandler,outHandler)</p>
  
  <p>however this all seems to work, it's a little glitchy when you move your mouse really fast, <em>now I'm asking</em> what the problem is (that's causing the glitches) and how it could be fixed with my current code.</p>
  
  <p>Thanks in advance</p>