How to make Jquery events only perform the most recent one triggered

Question

So I am made a navigation bar, which works almost perfectly. There is a small rectangle below the navigation tabs, the bar will go under the tab the user is currently hovering over. The problem I am having is that the bar will go to every single tab that has been hovered over one at a time, instead of just going to the one that is either currently being hovered over, or most previously was hovered over. If that doesn't make sense then check the full code out to see what I mean. Thank you for your time.

<div id='backNav'>
    <div id='navBar'>
      <div id='navLoc'></div>
    </div>
    <div id='cont'>
      <ul id='navList'>
        <li id='home' class='navItem'>Home</li>
        <li id='about' class='navItem'>About</li>
        <li id='shop' class='navItem'>Shop</li>
        <li id='blog' class='navItem'>Blog</li>
      </ul>
    </div>
  </div>

---

var main = function() {
  var navLoc = $('#navLoc');

  $('#home').hover(function(){
    navLoc.animate({
      left:75
    },300 )
  });

  $('#about').hover(function(){
    navLoc.animate({
      left:243
    },300 )
  });

  $('#shop').hover(function(){
    navLoc.animate({
      left:415
    },300 )
  });

  $('#blog').hover(function(){
    navLoc.animate({
      left:575
    },300 )
  });
}

$(document).ready(main);

Full Code: https://jsfiddle.net/tjqLbne1/
(The bar doesn't line up under the tabs correctly in the fiddle cause of the window size but you still get the idea)

Answer 1

In this case you want to purge the que, try clearQeue.

navLoc.clearQueue().stop();
navLoc.animate({
  left:75
},300 )

https://jsfiddle.net/qvohfs3w/

Fron the docs

There are a few ways you might wish to handle the ending of a que, the below link explains in more detail.

JQuery "Finish" Docs