<!--
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>