MooTools Link Nudging

At first I was doing it with margin-left, which works but is problematic as the animation can slide the link out from under your mouse (creating a mouseOut), which then starts animating back the other way (creating a mouseOver), and you get the Jitter thing going on.

Also, more evidence that MooTools animation is smoother than jQuery.

yap, cool effect. i tried something like this on my page (main navigation “jumps” up) too months ago. http://www.bugeyes.de

I love it, thanks. Your blog never fails to produce, even with small stuff like this.

Crazy, simple and slim. i check it out!bThamnk you ^^

Works great, i did it ^^.

I’m curious, how would one do this in jQuery? In a site I’m working on I have jQuery stuff and I don’t want to have to have two libraries

Cant seem to get it working. Hmm. I wouldn’t think using Milkbox along side it would create a problem.

Cute. From a usability perspective I’d think having the text of a link remove itself from under your mouse would be considered sub-optimal and counter-intuitive.

I’ll adopt the idea, with the addition of something that enforces the notion that there’s still something under the cursor.

@ david

http://www.test.pauldavis.org.uk/tem/1/

@david: Ok, I’ve done that. Still no luck, do I need to apply some CSS .navlink string?

@davis: Yay! It works! Thank you sir. =]

@David: I know, but it’s still disconcerting and non-obvious. Not horribly so, but enough so that I wouldn’t feel comfortable deploying it as-is.

Great tutorial. Thanks for share !

Nice effect, I just implemented it on my site! (jQuery’fied) :)

To avoid the text within the links wrapping I’ve applied a preliminary left and right padding (via CSS) and then I animate both of them (reducing the right padding and increasing the left padding at the same time) – this makes sure that there is the same amount of space for the text as there was before the animation, thus avoiding any confusing wrapping of text.

I’ve only done a 5px movement, I think I could get away with 10px before it starts looking weird.

What about…?

$$(’#footer-topics-1 a’).each(function(el) {
el.set(’morph’, {duration:300, link:’cancel’}).addEvents({
‘mouseenter’: function() { this.morph({ ‘padding-left’: 20 }); },
‘mouseleave’: function() { this.morph({ ‘padding-left’: 0 }); }
});
});

I’m not a JS expert, so this is something between a suggestion and a question…

In the original code:

$$(‘#footer-topics-1 a’).each(function(el) {
var fx = new Fx.Morph(el,{ duration:300, link:’cancel’ }); //This is the part that i’m talking about…
el.addEvents({
‘mouseenter’: function() { fx.start({ ‘padding-left’: 20 }); },
‘mouseleave’: function() { fx.start({ ‘padding-left’: 0 }); }
});

});

“new FX class” command is inside the “each” function, so i think (this is the part that i’m not so sure) the code creates a new “FX Class” instance with the same name -”fx”- for every element that the selector returns. So, maybe carrying the FX instance out of the each loop and than calling it inside the loop can increase the performance. (?)

@Brane: That would give each link the same Fx. Wouldn’t that cause some issues?

@Caligula, @david:

Yeah, you’re right. I completely misinterpreted the FX.Morph class concept. (I blame being sleepy :))

Is there a possibility that it will linear slide out and bounce:out back? can get it working together. For the rest: GOOD WORK!!!

@gijs:

If I don’t misunderstand what you ask, it can be done like this:

$$(‘#footer-topics-1 a’).each(function(el) {
var fx_in = new Fx.Morph(el,{ duration:300, link:’cancel’, transition: Fx.Transitions.Sine.easeOut });
var fx_out = new Fx.Morph(el,{ duration:300, link:’cancel’, transition: Fx.Transitions.Bounce.easeOut });
el.addEvents({
‘mouseenter’: function() { fx_in.start({ ‘padding-left’: 20 }); },
‘mouseleave’: function() { fx_out.start({ ‘padding-left’: 0 }); }
});

});

@bran: thanks for the fast replay, unfortunately its to late for me, but i give it a try tomorrow. Is that the “normal” way to set up different transitions
for the same event?

@all: think that it will help for many people that they know you can use in stead of:

.start({ ‘padding-left’: 20 });

this is also possible:
.start({ ‘padding-left’: ’20′, ‘background-image’: ‘url(bla.jpg)’ });

so you can set more styles.

i discovered that ‘background’: ‘url(bla.jpg) no-repeat red’ doesnt work in IE7, you have to set all styles fully listed, no shortcuts.

Sorry for my english, i’m dutch

Greets,

Gijs

For the life of me I can’t this script to work!!!!

I’m a novice with mootools, and I thought I was getting better.. For the life of me, i can’t figure out why the nudging isn’t working….
link text

Can you help me? Check out the bottom of my page.

Many thanks.

Erik

drop your code here, and stop make it difficult to leave your site.

Thank you so much. Here is the head of my page:

window.addEvent(‘domready’,function() {
//smooooooth scrolling enabled
new SmoothScroll({ duration:700 }, window);
});

window.addEvent(‘domready’,function() {
$$(‘#footer3 a’).each(function(el) {
var fx = new Fx.Morph(el,{ duration:300, link:’cancel’ });
el.addEvents({
‘mouseenter’: function() { fx.start({ ‘padding-left’: 20 }); },
‘mouseleave’: function() { fx.start({ ‘padding-left’: 0 }); }
});
});

The link to my CSS:

http://www.honestskin.com/src/css/global/global.css“

Don’t give up on me!! Your all I got!! :-)

What doesn’t work? The links in the #footer3 section are nudged, the ones that aren’t in a #footer3 section aren’t.

I got the nudge to work with jquery…. no luck with mootools.

Thanks.

perhaps you should your smooth scrool in the second window.addevent, do not use this twice

Hey David,

Thanks for sharing all your awesome stuff, I have had no problems implementing everything you have shared so far even though I have 0 knowledge of javasript or mootools but this one isn’t as clear as your other examples at all. I cant get this to work. How do you make the a tags associate with this script and is there anything I have to put in the css?

Thanks for any help

The noob!!!