Höhe, Rahmen und Farbe von Elementen ändern (Framework: MooTools)

Mit sogenannten Tweens, die einige von euch sicher aus der Flash-Welt kennen, werden die Folgenden Animationen realisiert:

HTML Quellcode

<p>
    <input type=submit id="heightEffect" value="Höhe">
    <input type=submit id="colorEffect" value="Farbe">
    <input type=submit id="borderEffect" value="Rahmen">    
    <input type=submit id="resetEffect" value="Zurücksetzen">    
</p>
<div class="demoElementHeight">
    <div id="myOtherElement" class="demoElement">
    </div>
</div>

CSS Quellcode

div.demoElement {
    width: 80px;
    height: 80px;
    border: 1px solid black;
    background-color: #f9f9f9;
    font-size: 12px;
    color: #000000;
    padding: 10px;
}

div.demoElementHeight {
    height: 120px;
}

Javascript Quellcode

window.addEvent('domready', function(){
    var otherEl = $('myOtherElement');
    $('heightEffect').addEvent('click', function(){
        otherEl.tween('height', 50);
        return false;
    });
    var myEffect = new Fx.Tween(otherEl);
    $('colorEffect').addEvent('click', function(e){
        e.stop();
        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');
    });
});