title: jQuery tooltip hover still running after mouse out
body: <p>I have a simple tooltip:</p>
  
  <p>CSS:</p>
  
  <pre><code>  html {
        font: 100% calibri;
      }
  
      ul {
        margin: 100px 0 0;
        padding: 0;
        list-style-type: none;
      }
      ul li {
        padding: 0;
        margin: 0 2px;
        float: left;
        position: relative;
        text-align: center;
        background-color: #ccc;
      }
      ul li a {
        padding: 14px 10px;
        display: block;
        color: #000;
        width: 144px;
        text-decoration: none;
        font-weight: bold;
      }
      ul li em {
        background-color: #ccc;
        width: 180px;
        height: 45px;
        position: absolute;
        top: -85px;
        left: -15px;
        text-align: center;
        padding: 20px 12px 10px;
        font-style: normal;
        z-index: 2;
        display: none;
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Home&lt;/a&gt;
        &lt;em&gt;This takes you home&lt;/em&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
        &lt;a href="#"&gt;Services&lt;/a&gt;
        &lt;em&gt;This shows you our serivces&lt;/em&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
        &lt;a href="#"&gt;About Us&lt;/a&gt;
        &lt;em&gt;This shows things about us&lt;/em&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
        &lt;a href="#"&gt;Contact Us&lt;/a&gt;
        &lt;em&gt;Your can message us.&lt;/em&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function() {
  
      $('ul a').hover(function(){
        $(this).next('em')
        .animate({
          opacity: 'show',
          top: '-75'}, 'slow');
      }, 
        function(){
          $(this).next('em')
          .animate({
            opacity: 'hide',
            top: '-85'
          }, 'fast');
      });
  
  });
  </code></pre>
  
  <p>Result:</p>
  
  <p><a href="https://jsfiddle.net/fsxm1Ldt/" rel="nofollow">https://jsfiddle.net/fsxm1Ldt/</a></p>
  
  <p>If I hover my mouse to and fro several times over the tooltip it will come in and out and will not stop until it completes the number of times I hovered in and out. How can I prevent it from doing this?</p>