want to float/animate menu hover image using jquery

[doha786]

I don't have much experience with jQuery, so need a small help to build up one navigation menu bar where hover image will float/animate from previous(.current) location.
Example: If the hover image remaining under 'HOME' as current page and if i hover/mouseover to 'CONTACT' menu then the 'hover_img' will float(animate) under 'CONTACT' and same way it will float (left to right/right to left) on mouseover/hover in menubar.

my css:

#nav_menu { clear: both; width: 960px; height: 80px; padding: 0 10px; 
background: url(images/back_menu_img.png) no-repeat bottom; }

#nav_menu ul { float: left; width: 600px;  margin: 0; padding: 40px 0 0 30px; list-style: none; } 
#nav_menu ul li { padding: 0px; margin: 0px; display: inline-block; }
#nav_menu ul li a {
float: left;
display: block;
width: 100px;
height: 26px;
padding: 5px 0;
margin-right: 5px;
font-size: 14px;
color: #fff;    
text-align: center;
text-decoration: none;
font-weight: bold;
outline: none;
border: none;
   }
  #nav_menu ul li a:hover,  #nav_menu ul li .current {
  color: #333;
  background: url(images/hover_img.png) no-repeat;
  }

anybody please help me to write jQuery to perform this action, here is my html:

<div id="nav_menu">
        <ul>
            <li><a href="#" class="current">Home</a></li>
            <li><a href="#">Company</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
</div>

[diafol]

http://api.jquery.com/hover/