The powerful Effects-Classes allow you to change any number of css styles with any transition and any duration
<!-- MooTools is released under the Open Source MIT license, which gives you the possibility to use it and modify it in every circumstance. --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style rel="stylesheet" type="text/css"> div.demoElement { width: 80px; height: 80px; border: 1px solid black; background-color: #f9f9f9; font-size: 12px; color: #000000; padding: 10px; } div.demoElementHeight { height: 120px; } .myClass { width: 300px; height: 50px; border: 3px dashed black; background-color: #C6D880; font-size: 20px; padding: 20px; } </style> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> window.addEvent('domready', function() { var el = $('myElement'); // MooTools is able to handle effects without the use of a wrapper, // so you are able to do effects with just one easy line. //FIRST EXAMPLE // There are different ways to add a fading opacity effect to an element click // Short version $('fadeOpacity').addEvent('click', el.fade.bind(el, [0])); // Long version $('tweenOpacity').addEvent('click', function(e) { // You often will need to stop propagation of the event e.stop(); el.fade(1); }); $('tweenOpacity1').addEvent('click', function(e) { e.stop(); el.fade(0.3); }); //SECOND EXAMPLE var otherEl = $('myOtherElement'); $('heightEffect').addEvent('click', function(){ otherEl.tween('height', 50); return false; // alternative syntax to stop the event }); // We can also create an Fx.Tween instance and use a wrapper variable var myEffect = new Fx.Tween(otherEl); $('colorEffect').addEvent('click', function(e) { e.stop(); // We change the background-color of the element myEffect.start('background-color', '#E6EFC2'); }); $('borderEffect').addEvent('click', function(e) { e.stop(); otherEl.tween('border', '10px dashed #C6D880'); }); $('resetEffect').addEvent('click', function(e) { e.stop(); otherEl.erase('style'); }); //THIRD EXAMPLE var anotherEl = $('anotherElement'); // Again we are able to create a morph instance var morph = new Fx.Morph('anotherElement'); $('morphEffect').addEvent('click', function(e) { e.stop(); morph.start({ width: '200px', color: '#C6D880' }); }); // Or we just use Element.morph $('CSSmorphEffect').addEvent('click', function(e) { e.stop(); // Changes the element's style to .myClass defined in the CSS anotherEl.morph('.myClass'); }); $('resetEffect1').addEvent('click', function(e) { e.stop(); // You need the same selector defined in the CSS-File anotherEl.morph('div.demoElement'); }); }); </script> <title>Effects Introduction</title> </head> <body> <h1>Effects Introduction</h1> <h2>Introduction</h2> <p> The powerful Effects-Classes allow you to change any number of css styles with any transition and any duration. </p> <p> <a href="#" title="Fading opacity" id="fadeOpacity">Fade opacity to 0</a> | <a href="#" title="Tween opacity to 1" id="tweenOpacity">Tween opacity to 1</a> | <a href="#" title="Tween opacity to 0.3" id="tweenOpacity1">Tween opacity to 0.3</a> </p> <div id="myElement" class="demoElement"> </div> <hr /> <p> <a href="#" title="Height-Effect" id="heightEffect">Height-Effect</a> | <a href="#" title="Backgroundc-Effect" id="colorEffect">Backgroundcolor-Effect</a> | <a href="#" title="Border-Effect" id="borderEffect">Border-Effect</a> | <a href="#" title="Reset" id="resetEffect">Reset</a> </p> <div class="demoElementHeight"> <div id="myOtherElement" class="demoElement"> </div> </div> <hr /> <p> <a href="#" title="Morph!" id="morphEffect">Morph!</a> | <a href="#" title="Morph with CSS" id="CSSmorphEffect">Morph to CSS-Class .myClass</a> | <a href="#" title="Reset" id="resetEffect1">Reset</a> </p> <div class="demoElementHeight"> <div id="anotherElement" class="demoElement"> Demo Text </div> </div> </body> </html>