title: animate borders
body: <p>I have this jquery code.</p>
  
  <pre><code>//this is the main javascript
  
  $(document).ready(function(){
  
      $('nav.menu a').hover(
          function () {
              $('nav.menu').find(".current_item").removeClass("current_item");
              $(this).addClass("current_item");
  
          }, 
          function () {
              $(this).removeClass("current_item");
              $('nav.menu').find(".damenu").addClass("current_item")
          }
  );
  
  });
  </code></pre>
  
  <p>and this html structure</p>
  
  <pre><code>&lt;nav class="menu"&gt;
      &lt;a href="home.html" class="current_item damenu"&gt;Home&lt;/a&gt;
      &lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;
      &lt;a href="home.html"&gt;Portfolio&lt;/a&gt;
      &lt;a href="home.html"&gt;About&lt;/a&gt;
      &lt;a href="home.html"&gt;Contact&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and this css</p>
  
  <pre><code>.menu
  {
  background: 1px solid #00ffff;
  width: 100%;
  padding: 0px 0px 0px 10px;
  }
  .menu a
  {
  padding: 8px;
  color: #0099ff;
  font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial,     Verdana, sans-serif;
  text-decoration: none;
  float: left;
  margin-right: 8px;
  text-shadow: 2px 1px 1px #ffffff;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  }
  .current_item /*, .menu a:hover*/
  {
  color: #C5F700 !important;
  border-top: 3px solid #C5F700 !important;
  border-bottom: 3px solid #C5F700 !important;
  }
  </code></pre>
  
  <p>as you can see, the routine is this, there is a class for the current menu and whenever a user hover into one of the menu, the class of the current menu is removed and a class "current_item" added to the current hover menu and in mouseout event, the class "current_item" is removed from the current hovered element and the class "current_item" is added back to the current menu which has also a class of "damenu" and as you can see the work of the class "current_item" is to add top and bottom borders and it works good, but I  want to add some animation into the borders or in the class "current_item" when mouseover or in mouseout.</p>
  
  <p>So precisely, I want to animate the borders or the class "current_item" whenever in mouseover or mouseout event and also, is there anyway I can make the nav into center?</p>
  
  <p>I am open in, Ideas, recommendation and suggestion. Hope someone here could help, thank you.</p>