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