jQuery animated hover links

I like to use jQuery to make the hover states of my site different

Here the code i use to do it

$("li a").hover(function() {
	$(this).stop().animate({paddingLeft : "10px"},200);
},function() {
	$(this).stop().animate({paddingLeft : "0px"},200);
});

With this code we’re basically selecting the anchor tag within a list item, then when a user hovers over it we’re pushing it 10px to the right then returning it to where it was after they mouse off it.

You can change the speed that the link slides by changing the number in the code, you will see that it is currently set as 200, this means that the left margin increases from 0px to 10px in 200 Milliseconds.

For this to work with javascript turned off we need to add this bit of css:

li a:hover {
    padding-left: 10px;
}

More info on the jQuery animate effect here http://docs.jquery.com/Effects/animate

This is my first ever blog tutorial so just drop me a comment on how i did.

Update:
From trying this script again I’ve realised it should be paddingLeft rather than marginLeft, so I’ve amended the code above.

Tags: , ,
More...