Browsing around the other day I came across a tool by David Walsh called Link Nudging. Basically it simply adds an effect on hover state to increase the left padding, or “Nudge”. Take a look at his link nudging demo to get a better understanding. The code is very compact (about 5 lines if you like to format your code) and easy to modify to fit your needs. However, I’m never content, so I added another line or two to make it more reusable, customizable, and more jQuery like:

jQuery.fn.nudge = function(o){
	o = jQuery.extend({},{ indent:20, speed:400},o);
	jQuery(this).hover(function() { //mouse in
		jQuery(this).animate({ paddingLeft: ‘+=’+o.indent }, o.speed);
	}, function() { //mouse out
		jQuery(this).animate({ paddingLeft: ‘-=’+o.indent }, o.speed);

Now we’ve extended jQuery so we can apply a nudging effect to any group of elements like so:


We’ve also made it possible to pass in the number of pixels to indent instead of hard coding the pixels into the animation as well as changing the speed. To change these options we can do the following:

$(’a.nudge’).nudge({ indent:40, speed:300 });

Hope someone finds this useful! Credit goes to David Walsh for creating this, I just added a few tweaks!