Using jQuery to nudge links

richardshepherd — Thu, 19 Mar 2009 07:58:20 +0000

jQuery is so blooming useful! There’s an effect you’re seeing all over the web now, where links nudge over to the right when you mouse over them.

So, here’s a simply tutorial to get jQuery link nudges onto your pages in just 5 minutes!

First we need need to include the jQuery library in the section of your page, which we can do with something like this…

And then we need the actual jQuery code that does all the magic. Again, this is in the of your page.

So what does that do?

First of all is the usual jQuery DOM ready command,

$(document).ready(function(){

which ensures we don’t execute any code until all the DOM elements have been loaded. We then tell jQuery to take all elements and add a function to them – in this case, whenever the user hovers over them.

$(document).ready(function(){

When the user hovers over the link, we then run the following piece of code, which is a standard jQuery animate method:

   $(this).animate({ paddingLeft: '5px' }, 200);
   }, function() {
      $(this).animate({ paddingLeft: 0 }, 200);
   });

$(this) is referring the element we have hovered over. This is great, because it means we can use the class ‘nudge’ on multiple elements on one page – in other words we can have whole menu systems with links that nudge.

We animate the link 5px to the right by changing the padding-left css property (in javascript this is referred to as paddingLeft rather than padding-left. 200 is the time in milliseconds. Obviously you can change these values to whatever you like. You could also add in additional CSS properties to animate!

In the following line we then reverse the effect when the user takes the mouse off the link, reducing paddingLeft back to 0.

It really is that simple. This effect looks best when there’s a few links using it because you get this wonderful cascading effect.

If you want to see a great example of a site that uses the jQuery link nudge effect, check out the footer of Chris Coyiers fantastic CSS Tricks site.

Ranger, out.

Richard Shepherd » link nudge

Using jQuery to nudge links