O'Reilly

jQuery Link Nudging

By on  

A few weeks back I wrote an article about MooTools Link Nudging, which is essentially a classy, subtle link animation achieved by adding left padding on mouseover and removing it on mouseout. Here's how to do it using jQuery:

The jQuery JavaScript

$(document).ready(function() {
	$('a.nudge').hover(function() { //mouse in
		$(this).animate({ paddingLeft: '20px' }, 400);
	}, function() { //mouse out
		$(this).animate({ paddingLeft: 0 }, 400);
	});
});

It's important to keep the nudge small and quick, so I set the animation to 20 pixels over 400 milliseconds.

Track.js Error Reporting

Recent Features

  • Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • Create a Simple Dojo Accordion

    Let's be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo's Dijit library provides an incredibly simply method by which you can...

  • MooTools Fun with Fx.Shake

    Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter...

Discussion

  1. Uhm… If you move your mouse quickly trough all items, you will have an annoying animation.
    i think you should add stop() before animate() so the code will be this:

     $(this).stop().animate({ paddingLeft: '20px' },400);  
    

    Anyhow, nice example :P

  2. Yep, nicely done Dave, although Staicu’s method is a definite necessity.

    Another thing to ponder is, if your anchors have a fixed width, when animated the width will be reduced which can sometimes make the text wrap.

    To avoid this, it helps to have padding already setup on the anchors. For example if I had anchors setup with 5px left and right padding, this would work:

    $('a').hover(function(){
        $(this).stop().animate({paddingLeft:'10px',paddingRight:0},100);
    },function(){
        $(this).stop().animate({paddingLeft:'5px',paddingRight:'5px'},100);
    });    
    
  3. Al

    Nope. Feels more like a flash game than an useful addition to a site.

  4. I had .stop(); on mine…. but… you really don’t get the fun wave effect when you use stop. You generally mouse over those links so fast that you barely see them budge at all. Without .stop();, it’s a neater effect, but then you run into the problem of the animation running over and over and over when you mouse on and off of a link quickly. I wonder if there is a good in-between.

  5. @Staicu Ionut: I’m with Chris on this — I feel as though “the wave” enhances the overall effect.

    @James: Great tip, but I hesitate to put that into my script because I feel the padding adjustments should be a judgment call. You do have an excellent point though.

    @Al: Ummmm…OK.

  6. @Al: O_o I cannot relate flash games that a link effect to “sugarize” a navigation style…

    @Chris: Precisely!

    @David: The jQuery animation is smoother than the MooTools’s you’re using on your site and showed in the previous post, I wonder why :/

  7. For my two cents worth, I think the animation is just perfect as it is. I, too, enjoy the wave-effect if you mouse over them all quickly. It’s subtle. It certainly is not like a casino or something.

    @Al …. come on, buddy. Ya gotta lighten up a bit. What do you define as a “useful addition”? I moused over them all real fast, thought the wave looked neat, I chuckled a bit and said “oh, I like that”, and therefore to me it was a quite useful addition!

    I’d leave it just like it is. A blinking yellow background? No. A dragon head popping out of every link on the page? No. A subtle little movement of the link – yes. Fine job.

  8. This is great Dave!

    I’m trying it out on my blog in the titles of my posts. I know it probably feels better when there is a list of links (for the wave effect) but I like the extra touch in my titles.

    Thanks for this,

    Patrick

  9. Pretty nice, clean effect. I have one useful tweek. Some may not want to return to paddingLeft 0 or expand to paddingLeft 20px based on the initial padding, so you might use +=20. (I just recently found out about this feature and it’s quite nice!

    $('a.nudge').hover(function() { //mouse in  
        $(this).animate({ paddingLeft: '+=20' }, 400);  
    }, function() { //mouse out  
        $(this).animate({ paddingLeft: '-=20' }, 400);  
    });
    
  10. I thought I’d add another line or two to make it feel more like jQuery:

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

    so you can call it like:

    $('a.nudge').nudge();
    

    or add some options:

    $('a.nudge').nudge({ indent:40, speed:300 });
  11. Jon

    Great tutorial!!

    One question. If I have a horizontal list and wanted to animate this in a similar fashion to your tutorial (except I want to animate the links to go up and down), would it just be a matter of changing the values to bottomPadding…etc?? To adapt for a horizontal menu animating up and down?

    Thanks in advance for any guidance. Keep up the great work!

    ~Jon

  12. awsome stuff this lil technique. Yeah it is like a flash application. I’ve adapted this into some experimental CSS apps im playinf with.

    It makes me wonder if jQuery can proform these animated menus, what other animated effects it can acheive?

    If any one has any examples please post. I’d love to hear from ya.

    Good s%#t!

  13. Really awesome!

    Thanks for sharing.

  14. Jared

    @Jared – You are able to manipulate all kinds of css attributes such as padding, margin border widths etc.

  15. dubbelj

    This is pretty much the first thing you’ll learn while just trying jQuery out… Why dedicate an article to such a simple function with hardly any practical uses?

  16. …because everyone has to start somewhere? Also, if you’ll notice, it’s the jQuery version of another article he wrote which featured the same effect but with MooTools; makes perfect sense to me.

    Also, just because you can’t think of a practical use doesn’t mean there isn’t one. Seriously, what’s with all the nay-sayers? Nobody’s forcing you to use the technique or to read the article; if you don’t care for it, just move on along.

  17. A practical use would be that of the title… nudging links. It’s great for a list of links because it actually increases the readability of link list or…. navigation link lists, which is exactly what I use this for on several sites. I first found Chris Coyier using this and implemented his technique.

    Nice demo article. I like the wide range of topics discussed.

  18. thanks for your tutor. I use the blogspot, and I change the ‘padding’ to ‘opacity’.

  19. I’m very new to Javascript. I can’t get this to work. I have the jQuery library uploaded and the snippet of code you posted uploaded too.

    I set up a demo page just to see how it all works, and I have made it degrade gracefully with CSS that does a similar job. Here’s the link to my demo page: Link Nudging Effect | Vizion3. Here’s the link to the jquery.js file.

    The link_nudge.js file contains:

    $(document).ready(function() {
        $('#nav li a:hover').hover(function() {
            $(this).animate({ paddingLeft: '24px' }, 400);
        }, function() {
            $(this).animate({ paddingLeft: '12px' }, 400);
        });
    });
    

    Please can you help me to get it to work?

    Thanks. :)

  20. I’ve got it to work now – it seems the link_nudge.js file I uploaded to the server was corrupted. So you can ignore my last comment. I do feel that the MooTools version is better. So I’ll probably end up using that version.

    Thank you for your tutorial. :-)

  21. Mike

    I am using this in a div that has a floated div next to it, and the nudging is moving the floated div, is there a way to avoid this?

  22. @Mike: Set a width for the anchor’s containing DIV.

  23. Mike

    It has a width set, I am wondering if perhaps the width just isn’t wide enough to also accommodate the nudge?

  24. John

    Is it possible to have the text actually nudge upwards instead of left or right? If so, how would one go about doing this?
    Thanks in advance!

  25. hi!

    i really like this plugin. thanks for it!

    i’m having an issue on a little site i did for a friend’s movie

    http://wanderlostfilm.com/

    it works smashing on every page but my post detail pages

    http://wanderlostfilm.com/wanderlost-invited-to-attend-independent-film-week-in-nyc-trailer-unveiling/

    I get the js error in firebug

    $(“.page_item a”) is null
    http://wanderlostfilm.com/wp-content/themes/wanderlost/js/jquery.nudge.js
    Line 39

    please let me know if you have any advice. THANKS

  26. Andrew S.

    David, is there any way to make by Blogger side items nudge like this?

    BTW, your blog is awesome! Thanks for sharing. :)

    – @

  27. Drew

    This is nice, can someone explain how to implement this onto a site? I see the code but don’t know what to do with it. Thanks! I use iweb thanks in advance…

  28. Andrew S.

    @Drew

    I’m not so great at this Javascript, but this is how I got it to work:

    Download jQuery from http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js

    Place it in a folder on your site, i.e. http://www.yoursite.com/jquery/

    Create a new file in that folder, i.e. scripts.js

    In the blank file type the following: // David Walsh Link Nudging

    Then, on the next line, insert the code that David provides in this article.

    Now, go to your index page, and before the “” place the following lines:

    Now, for every link you want to use this affect, within the link tag type class=”nudge”. For example, if the link looks like this:

    Home

    change it to

    Home

    And, that should be it. Of course, there are a bunch of variables that you may have to account for that may be specific to your site, but that’s the basics of it.

    Hope this helped! :)

    – @

  29. Andrew S.

    @Drew

    Sorry, unfortunately, I dunno how to make the code lines appear here.

    – @

  30. Drew

    Hi, thanks :)

    Ah, can anyone fill in the blanks for me? Thanks :)

  31. Andrew S.

    @Drew,

    Ok, I put it up here for you: http://fotofoto.ca/jquery-link-nudge.html

    – @

  32. Great article. Took me a minute to get it to work. I didn’t realize you had to give any link you want this to apply to a class of “nudge.” After I did that it worked like a charm. Thanks!

    Tim

  33. majid

    @Staicu Ionut: yes this is good trick .

  34. majid

    @Staicu Ionut: yes this is good trick .

  35. It’s really nice sharing :)

  36. razvan

    how can I move ths link verticaly?

  37. Trent: What a wonderful tweak! .. “+=20″ This really did the trick.. I’ve been working on this kinda effect in a vertical menu.. and the same thing happende level 2 li links returned to: padding-left: 0; and that really sucked.. Your way is more dynamic..

    One problem though: .. when using .stop().animate(….the problem is back.. after hover: padding-left: 0; once again..

    Awsome blog, awsome users.. :) I tend to learn more from comments than from any of jQuerys tuts..

  38. Hi great tutorial!
    only one question: how can I scale font instead of move? thanks!

  39. A more solid approach would be to make the parent element position:relative; and these links position:absolute;.

    Then use animate to increase or decrease the left or right position relative to the parent element. This would prevent nudging elements next to your animated element.

    @Mike, you may want to try that.

  40. wow..
    it looks great..
    this is what i searching for a few day..
    thanks for sharing..

  41. hey..
    i’ve implemented it in my website project..
    but i change the code into this one:

    $(document).ready(function() {
    $('#sidebar ul li ul li').hover(function() { //mouse in
    $(this).animate({ marginLeft: '5px' }, 150);
    }, function() { //mouse out
    $(this).animate({ marginLeft: 0 }, 150);
    });
    });
    

    i changed ‘padding’ to ‘margin’..

    it works fine..
    once again, thanks for sharing this tuts..

  42. So I tried subscribing to your Feed, and it outputted a “Malformed XML” error… Can you tell me if it’s just me or the site?

  43. I like the valuable information you provide in your articles. I will bookmark your weblog and check again here regularly. I am quite sure I’ll learn lots of new stuff right here! Best of luck for the next!

  44. Hi there this is kind of of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding know-how so I wanted to get guidance from someone with experience. Any help would be greatly appreciated!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...

  • Hotjar &#8211; All-in-one Analytics and Feedback

    Website analytics are a massive business -- the more data you can collect with regard to your users' behaviors on your site, the more you can increase and maximise conversion...and increased conversion is always good.  Sometimes increase conversion means more money, improved user experience, viewer retention,...

  • Crafting a 3D React Carousel

    There is something in me that is amazed but beautiful 3D interfaces. And it doesn’t matter whether they’re functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they’re artistic representation pushing the limits of...