title: Hover function repeating whenever you move mouse inside selector
body: <p>I have an animation that fires on hover inside certain divs. When the mouse is in the div, moving it to a different location in the div causes the hover effect to trigger again. I've tried using mouseenter/mouseleave and that does the same thing.</p>
  
  <p>How can I make the function only trigger on mouseenter and mouseleave and not whenever it moves inside the selector?</p>
  
  <p><a href="https://jsfiddle.net/4gub9wLw/1/" rel="nofollow">DEMO</a></p>
  
  <pre><code>$('#nav, #footer, #leftNav, #rightNav').hover(function() {
    $('#navFill').animate({
      left: 0
    }, 300);
    $('#footerFill').animate({
      left: 0
    }, 300);
    $('#leftNavFill').animate({
      top: 0
    }, 300);
    $('#rightNavFill').animate({
      top: 0
    }, 300);
  }, function() {
    $('#navFill').animate({
      left: '-100vw'
    }, 300);
    $('#footerFill').animate({
      left: '100vw'
    }, 300);
    $('#leftNavFill').animate({
      top: '100vh'
    }, 300);
    $('#rightNavFill').animate({
      top: '-100vh'
    }, 300);
  });
  </code></pre>