MooShell

• Run
• Edit

• Result
• JavaScript
• HTML

// *** THE CLASS *** //
Fx.Tween.Toggle=new Class({Extends:Fx.Tween,options:{property:'opacity',from:0,to:1},toggle:function(event){if(event)event.stop();(this.toggled)?this.toggleOut():this.toggleIn();this.fireEvent('onToggle');return this;},toggleIn:function(){this.toggled=true;this.start(this.options.to);this.fireEvent('onToggleIn');return this;},toggleOut:function(){this.toggled=false;this.start(this.options.from);this.fireEvent('onToggleOut');return this;},setIn:function(){this.toggled=true
this.set(this.options.to);return this;},setOut:function(){this.toggled=false;this.set(this.options.from);return this;}});

// *** USAGE *** //

var myToggle = new Fx.Tween.Toggle('element',{
    property: 'height',
    from: 0,
    to: 200,
    link: 'cancel',
    onToggle: function(){
        $('onToggle').highlight('#000');
    },
    onToggleIn: function(){
        $('onToggleIn').highlight('#000');
    },
    onToggleOut: function(){
        $('onToggleOut').highlight('#000');
    }
}).setIn();

// *** TEST *** //

$('toggle').addEvent('click',function(){
    myToggle.toggle();
});
$('toggleIn').addEvent('click',function(){
    myToggle.toggleIn();
});
$('toggleOut').addEvent('click',function(){
    myToggle.toggleOut();
});
$('setIn').addEvent('click',function(){
    myToggle.setIn();
});
$('setOut').addEvent('click',function(){
    myToggle.setOut();
});

<h3>The height should go from 0 to 200 and back</h3>
<h2>Events</h2>
<h3>
    <span id="onToggle">onToggle</span>
    <span id="onToggleIn">onToggleIn</span>
    <span id="onToggleOut">onToggleOut</span>
</h3>


<h2>Public methods</h2>
<p>
    <button id="toggle">toggle</button> &nbsp; &nbsp; 
    <button id="toggleOut">toggleOut</button>
    <button id="toggleIn">toggleIn</button>  &nbsp; &nbsp; 
    <button id="setOut">setOut</button>
    <button id="setIn">setIn</button>
</p>    
<div id="element"></div>