MooTools Link Fading
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.
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.
What are your thoughts on this? Too much? Just right? Let me know!
![Create a CSS Cube]()
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener
and attachEvent
. Times have changed but there are still a few functions each developer should...
![AJAX Page Loads Using MooTools Fx.Explode]()
Note: All credit for Fx.Explode goes to Jan Kassens.
One of the awesome pieces of code in MooTools Core Developer Jan Kassens' sandbox is his Fx.Explode functionality. When you click on any of the designated Fx.Explode elements, the elements "explode" off of the...
![Create a Sheen Logo Effect with CSS]()
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
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.
thats why i’m using mootools, thanks for the great idea, i’m looking to integrate it in my blog… ^^
I agree with Paul, there’s a problem with effects starting and ending.
Here is my solution, 100% mootools-sugar!
@thomasd: I’ll try that sometime today! Thanks for contributing!
the problem can be resolved simply like this:
@norpius: Yep, just got that a few minutes ago.
Hmm.. I thought Fx.Tween is enough for this..
Man, you’re F A N T A S T I C !
Why not use addClass()?
How I can implement this on wordpress sidebar links…
I’m got trouble adding class and id to the specified links.. tq..
I like this, useful and small. I think change my blog’s links. Thank you for sharing…
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!
yeah, I’m also looking at a way to do a background fade? any idea where to find this?
cheers
s
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
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
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!
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?
I think this should work:
Set in the CSS:
text-decoration: none;
for.fade
andtext-decoration: none; border-bottom: #000 1px solid;
for.fade:hover
Then replace in the script
color
withborder-bottom
and replace#ff8c00
with#ff8c00 1px solid
Adjust the color-codes and you’re done ;)
Isn´t it possible to use the link fading with the email protection script? Both together doesn´t work. :(
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
man you are awesome… really helpd me!!!
hi david
great code and thanks a lot for all you make !!
i use your script in a website with “opacity” and it work !
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
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
the best way was only one clicked event is stored and overrides other actives with original color again
Your comment formatting screws up the “” thingys around the selectors!