title: Text hover jquery animation
body: <p>I am trying to accomplish a text hover effect for navigation links, where on mouseenter, the text in the link quickly slides up (briefly disappears), the text changes, then slides down. On mouseleave, the original text comes back.</p>
  
  <p>Similar to what the following site navigation links has:</p>
  
  <p><a href="http://wrapbootstrap.com/preview/WB08808B5" rel="nofollow">http://wrapbootstrap.com/preview/WB08808B5</a></p>
  
  <p>This is what I tried, seems to fire more than once on mouseenter and the animation is never carried out as described above:</p>
  
  <pre><code>&lt;div class="navbar-right" &gt;
      &lt;ul class="nav navbar-nav" &gt;
          &lt;li&gt;&lt;a href="#" class="link"&gt;Cars&lt;/a&gt;&lt;span class="nav_anim"&gt;to drive&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="link"&gt;Wood&lt;/a&gt;&lt;span class="nav_anim"&gt;to chop&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="link"&gt;steak&lt;/a&gt;&lt;span class="nav_anim"&gt;to eat&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>var orig, anim;
  $('.link').mouseenter(function () {
      orig = $(this).text();
      anim = $(this).parent().children('.nav_anim').text();
      $(this).stop(true,false).slideUp(300).text(anim).slideDown(300);
  }).mouseleave(function(){
      $(this).stop(true,false).slideUp(300).text(orig).slideDown(300);
  });
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/f0raekme/1/" rel="nofollow">http://jsfiddle.net/f0raekme/1/</a></p>