jQuery Link Nudging

Discussion

1. Staicu Ionut

   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. James

   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. webdevvote

   You’re been voted!!
   Track back from http://webdevvote.com/Javascript/jQuery_Link_Nudging
5. Chris Coyier

   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.
6. david

   @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.
7. Ahmed

   @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 :/
8. WebDevVote

   You’re been voted!
   Track back from http://webdevvote.com/Javascript/jQuery_Link_Nudging
9. brett

   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.
10. Patrick DeVivo

    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
11. Trent

    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);  
    });
    
12. Trent

    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 });
13. 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
14. Jared

    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!
15. Napolux

    Really awesome!

    Thanks for sharing.
16. Jared

    @Jared – You are able to manipulate all kinds of css attributes such as padding, margin border widths etc.
17. 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?
18. EVula

    …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.
19. Mark Host

    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.
20. nady

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

    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. :)
22. Silver Firefly

    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. :-)
23. 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?
24. David Walsh

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

    It has a width set, I am wondering if perhaps the width just isn’t wide enough to also accommodate the nudge?
26. 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!
27. Chad Pry

    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
28. Andrew S.

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

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

    – @
29. 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…
30. 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! :)

    – @
31. Andrew S.

    @Drew

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

    – @
32. Drew

    Hi, thanks :)

    Ah, can anyone fill in the blanks for me? Thanks :)
33. Andrew S.

    @Drew,

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

    – @
34. Tim Ginter

    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
35. majid

    @Staicu Ionut: yes this is good trick .
36. majid

    @Staicu Ionut: yes this is good trick .
37. NXqd

    It’s really nice sharing :)
38. razvan

    how can I move ths link verticaly?
39. Phil M.

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

    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.
41. ciptard

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

    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..
43. Robert Chen

    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?
44. Fixed Mortgage Rate Deals

    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!
45. ips

    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!