Ease element background color css or jquery

Question

Having difficulty finding a suitable tutorial..have no idea where to start really:

What I am trying to build

If you hover over the navigation menu, you will see that the background behind each link eases in bright pink from right to left. I am just stumped at how you would animate something like this. Anyone able to point me in the right direction?

Update: Solved it. Wouldn't you know 10 minutes after I post this question I figure it out.

For anyone who is interested read up on: .animate()

Answer 1

Here is an easier solution using CSS, without any javascript or jquery:

http://jsfiddle.net/L6hhj/

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%;
}