Getting started

Of course, the first thing to do is downloading the mootools framework. In this exemple, I’m using a version released last year (That you can download here) but there’s no particular reason why it shouldn’t work with other versions.
If you want to see a live demo of this effect, just have a look here and mouse ouver the links on the menu or the sidebar.

You’ll also need a separate .js file to put the script. You can embed the javascript code within the <head> and </head> html tags if you prefer, but in my opinion it is better to have the Javascript code in a separate text file.

If you’re new to Mootools you should check out this great tutorial that will teach you Mootools basics and show you an exemple of its numerous possibilities.

Integrating the framework in your HTML page

Nothing hard here. Once you created an empty file named links.js, you can integrate both the Mootools framework and this file in your html document:

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="links.js"></script>

The code

We’re now ready to play! Open your links.js file and fill it with the following code:

window.addEvent('domready', function() {
var list = $$('a');
list.each(function(element) {
        var fx = new Fx.Styles(element, {duration:500, wait:false});
        element.addEvent('mouseenter', function(){
                fx.start({
                        'color': '#999'
                });
        });

        element.addEvent('mouseout', function(){
                fx.start({
                        'color': '#000',
                });
        });

});

Right now, when you’ll mouse over any of your links, they’ll fade from #999 to #000. Very nice, isn’t it?

Related Posts

No related posts.