JavaScript DHTML/Mootools/Effect
The powerful Effects-Classes allow you to change any number of css styles with any transition and any duration
<source lang="html4strict">
<!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>
Effects Introduction
Introduction
The powerful Effects-Classes allow you to change any number of css styles with any transition and any duration.
<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>
<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>
<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>
Demo Text
</body> </html>
</source>
