Having difficulty finding a suitable tutorial..have no idea where to start really:
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()
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%;
}