title: How to create a sliding animation on menu hover with jQuery?
body: <p>I've seen this on plenty of websites but I'm not sure if I'll be able to explain it.</p>
  
  <p>Sometimes there are sliding elements in navigation, just like arrow under menu items that is sliding when user hovers over different menu links etc.</p>
  
  <p>Here's a simple menu:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link number 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link something 4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;   
  </code></pre>
  
  <p>And some jQuery (I know I'll be able to get the same effect with simple css :hover):</p>
  
  <pre><code>jQuery('ul li a').hover(function() {
      jQuery('a').removeClass('active');
      jQuery(this).addClass('active');
  });
  </code></pre>
  
  <p>Also, working jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/8EvhK/" rel="nofollow noreferrer">http://jsfiddle.net/8EvhK/</a></p>
  
  <p>Buttons background becomes red on hover. I want this background to slide and transform (width) between these buttons as I hover.</p>
  
  <p>How to do something like that? I've been looking for tutorials, but no luck.</p>
  
  <p>Thanks a lot!</p>