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>
The powerful Effects-Classes allow you to change any number of css styles with any transition and any duration : Effect « Mootools « JavaScript DHTML

Related examples in the same category
