Here is an easier solution using CSS, without any javascript or jquery:
So, basically we have a span element inside the links which on hover is going to be 100% wide. You just need to add some transition to animate the color / width:
HTML:
<ul>
<li><a href=""><span></span><strong>Menu item</strong></a></li>
<li><a href=""><span></span><strong>Menu item</strong></a></li>
<li><a href=""><span></span><strong>Menu item</strong></a></li>
</ul>
CSS:
ul li {
display:block;
}
ul li a {
display:block;
position:relative;
height:30px;
line-height:30px;
color:#666;
transition: all ease-in-out 0.5s;
}
ul li a span {
position:absolute;
right:0px;
width:0px;
background:red;
height:30px;
top:0px;
transition: all ease-in-out 0.5s;
}
ul li a strong {
position:relative;
}
ul li a:hover {
color:#fff;
}
ul li a:hover span {
width:100%;
}