jQuery Link Nudging

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

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

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

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

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.

@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 :/

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

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.

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

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

Sorry, I got carried away with your idea and added another line or two in there so it feels 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 we can call it like:

$(‘a.nudge’).nudge();

Or change some settings:

$(‘a.nudge’).nudge({indent:20,speed:400});

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

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

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!

Really awesome!

Thanks for sharing.

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

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?

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

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.

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

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. :)

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. :-)

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?

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

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!

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

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

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

- @

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…

@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! :)

- @

@Drew

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

- @

Hi, thanks :)

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

@Drew,

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

- @

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

@Staicu Ionut: yes this is good trick .

@Staicu Ionut: yes this is good trick .

It’s really nice sharing :)

how can I move ths link verticaly?

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