title: Underline animation with jQuery
body: <p>I'm trying to do an animation with hover on a link without success, here's my code: </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;a class="border" href="#"&gt;HOME&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a class="border" href="#"&gt;TOUR&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a class="border" href="#"&gt;CONTACTUS&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>SCRIPT</p>
  
  <pre><code>$(document).ready(function () {
      $(".border").hover(function () {
          $(this).animate({
              borderBottom: '2px solid #3399FF',
              width: '46%'
          }, 500);
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/2GJrW/3/" rel="nofollow">FIDDLE</a></p>
  
  <p>I know it looks very bad but, please help !</p>
  
  <p>I appreciate your consideration.</p>