Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

MooTools Link Fading

By David Walsh on October 6, 2008

We all know that we can set a different link color (among other properties) on the hover event, but why not show a little bit more dynamism by making the original color fade to the next? Using MooTools 1.2, you can achieve that effect.

View Demo

The MooTools JavaScript

window.addEvent('domready',function() {
	$each($$('.fade'), function(el) {
		var original = el.getStyle('color');
		var morph = new Fx.Morph(el,{ 'duration':'300', link:'cancel' });
		el.addEvents({
			'mouseenter' : function() { morph.start({ 'color':'#ff8c00' }) },
			'mouseleave' : function() { morph.start({ 'color': original }) }
		});
	});
});

For every link with the fade class, a transition occurs on the mouseenter and mouseleave events. You'll place the "to" color in the spot designated in comments in the code above.

View Demo

What are your thoughts on this? Too much? Just right? Let me know!

Recent Features

By David WalshNovember 21, 2011
Page Visibility API
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
By David WalshNovember 7, 2012
Camera and Video Control with HTML5
Client-side APIs on mobile and desktop devices are quickly providing the same APIs. Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop. One of those APIs is the getUserMedia API...

Incredible Demos

By David WalshApril 3, 2008
PHP Woot Checker – Tech, Wine, and Shirt Woot
If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot: Every day, Woot sells one product. Once the item is sold out, no more items are available for purchase. You don't know how many...
By David WalshJuly 19, 2010
Multiple File Upload Input
More often than not, I find myself wanting to upload more than one file at a time. Having to use multiple "file" INPUT elements is annoying, slow, and inefficient. And if I hate them, I can't imagine how annoyed my users would be. Luckily Safari, Chrome...

Discussion

Paul Bennett
Kinda cool, and could work in the right application. It’s always worth remembering what the users expects from a link though.

Unfortunately events don’t finish if a new one is fired right now, so the links can become locked to their active colour until the mouse enters again.
^Nicki^
thats why i’m using mootools, thanks for the great idea, i’m looking to integrate it in my blog… ^^

thomasd

I agree with Paul, there’s a problem with effects starting and ending.
Here is my solution, 100% mootools-sugar!

$$('.fade').set('morph', {'duration': '300'}).addEvents({
    'mouseenter': function(){
        if(!this.retrieve('original')){ this.store('original', this.getStyle('color'));}
        this.morph({'color': '#ff8c00'});
    },
    'mouseleave': function(){
        this.morph({'color': this.retrieve('original')});
    }
});

david
@thomasd: I’ll try that sometime today! Thanks for contributing!

norpius

the problem can be resolved simply like this:

var morph = new Fx.Morph(el,{ 'duration':'300', link: 'cancel' });

david
@norpius: Yep, just got that a few minutes ago.
Lim Chee Aun
Hmm.. I thought Fx.Tween is enough for this..
Alex
Man, you’re F A N T A S T I C !
Ahmed
Why not use addClass()?
manS
How I can implement this on wordpress sidebar links…

I’m got trouble adding class and id to the specified links.. tq..
taylan
I like this, useful and small. I think change my blog’s links. Thank you for sharing…
speed
Hey one more cool script :)

Thanks man!

One quick question: How can I replace the “Color” with “Background Image” ?
I tired but it ain’t working :(

Any help would be appreciated!
stefan
yeah, I’m also looking at a way to do a background fade? any idea where to find this?
cheers
s
cyrille
Hi,

Speed, Stefan, did you find the way to morph a photo by an other one ?
I accept with pleasure your solutons if you got some !

cheers
h-a-r-v
Hey,

What should I do to make it get the target color value from a specified css class instead of hard-coding it in the script as above?

I had a special class written to do it in 1.11, but it doesn’t work under 1.2.1. I’ve already received some feedback and I guess I can fix it, but that person suggested me using fx.morph, but looking at the given example I can’t really figure out how.

Thanks in advance,
Kind regards,
h-a-r-v
Pete
Hello,

I’m trying to write a link fading plugin for Joomla but i cant get it to work because Joomla uses Mootools 1.11
It seems mootools 1.11 doesnt know $each and Fx.morph
Do you have any advice how to get this to work with mootools 1.11?

Thank you!
johan
Looks very sweet & simple and will deff. try this out. :)
But …
I would like only the underlines to fade, not the letters is this possible?
If so, how?
Pete
I think this should work:

Set in the CSS: text-decoration: none; for .fade and text-decoration: none; border-bottom: #000 1px solid; for .fade:hover

Then replace in the script color with border-bottom and replace #ff8c00 with #ff8c00 1px solid

Adjust the color-codes and you’re done ;)
Birke
Isn´t it possible to use the link fading with the email protection script? Both together doesn´t work. :(

piotr

Hey, here’s code for MooTools 1.11 for menu in Joomla. Just assign ID in menu module configuration.
I got help from http://demos111.mootools.net/Fx.Styles

window.addEvent('domready', function() {

var list = $$('#mainmenu li a');
var original;
list.each(function(element)
{
    if ( element.parentNode != $('current')) {
        var fx = new Fx.Styles(element, {duration: 1000, wait: false, transition: Fx.Transitions.Sine.easeIn});
        original = element.getStyle('color');

        element.addEvent('mouseenter', function(){
            fx.start({
                //'opacity' : 1,
                'color': '#333333'
            });
        });

        element.addEvent('mouseleave', function(){
            fx.start({
                //'opacity' : 0.8, 
                'color': original
            });
        });
    };
});
});

elron
man you are awesome… really helpd me!!!
paps
hi david
great code and thanks a lot for all you make !!

i use your script in a website with “opacity” and it work !
```
window.addEvent('domready',function() {
	$each($$('.fade'), function(el) {
		var original = el.getStyle('opacity');
		var morph = new Fx.Morph(el,{ 'duration':'100', link:'cancel'});
		el.addEvents({
			'mouseenter' : function() { morph.start({ 'opacity':0.5}) },
			'mouseleave' : function() { morph.start({ 'opacity':original}) }
		});
	});
});
```
but I would like my div with "opacity:0.5" when the page open, and when you click on the div, it stay on "opacity:original" (the link is on the same page with a function show/hide)
Is that possible ?

thanks for your answers, and excuse me for my poor english (I’m french :-))

paps
moprhwarp
Hi, thanks the script, simple and easy to use, but I definitely miss one small one function for the active class, i could figure it out it should look like a kind like that:

‘mouseenter’ : function() { morph.start({ ‘color’:’#2727f9′ }) },
‘mouseleave’ : function() { morph.start({ ‘color’: original }) },
‘click’ : function() { morph.start({ ‘color’:’#FF0000′ }) }

but on mouseleave the ‘click’ color should stay, anyone knows how?

best regards

morphwarp
the best way was only one clicked event is stored and overrides other actives with original color again

Johan
Your comment formatting screws up the “” thingys around the selectors!

MooTools Link Fading

The MooTools JavaScript

Recent Features

Page Visibility API

Camera and Video Control with HTML5

Incredible Demos

PHP Woot Checker – Tech, Wine, and Shirt Woot

Multiple File Upload Input

Discussion