Einblenden und Ausblenden (Framework: MooTools)

Mit MooTools können Sie Elemente, z.B. DIV Container, aus- und wieder einblenden.

HTML Quellcode

<div id="myElement" class="demoElement">
    Benutzen Sie die Buttons, um diesen DIV-Container auszublenden, 
    einzublenden oder nur teilweise sichtbar zu machen
</div>
<p>
    <input type="submit" id="fadeOpacity" value="ausblenden">
    <input type="submit" id="tweenOpacity" value="einblenden">
    <input type="submit" id="tweenOpacity1" value="30% sichtbar">
</p>

CSS Quellcode

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

Javascript Quellcode

window.addEvent('domready', function(){
    var el = $('myElement');
    $('fadeOpacity').addEvent('click', el.fade.bind(el, [0]));
    $('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);
    });
});