[mootools]クリックでフェードインアウトさせる

ボタンやリンククリックでフェードインアウトさせるサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものです。追記で1.2の解説もしてます。

$('nav').effect('opacity').set(0);
$('nav').effect('height').set(0);

var navFx = new Fx.Styles('nav',{duration: 300, transitions: Fx.Transitions.backIn});
$('run').addEvent('click', function() {
var height = $('nav').getStyle('height').toInt();
if (height > 0){navFx.start({ 'height': 0, 'opacity': 0 });}
else{navFx.start({ 'height': 50, 'opacity': 1 });}
});

<a href="#" id="run">button</a>
<div id="nav"> mootools sample</div>

$('nav').effect('opacity').set(0);
透明エフェクトを#navにセットする。初期値０

$('nav').effect('height').set(0);
#navのheightを０にセット。

var navFx = new Fx.Styles('nav',{duration: 300, transitions: Fx.Transitions.backIn});
#navに対しFx.Stylesクラス作成。navFxに格納。

$('run').addEvent('click', function()
#runがクリックされたら実行。

var height = $('nav').getStyle('height').toInt();
#navのheightを取得。toInt()でpxを除外する。

if (height > 0){navFx.start({ 'height': 0, 'opacity': 0 });}
もしheightが0より大きかったら

else{navFx.start({ 'height': 50, 'opacity': 1 });}
heightが0なら

for ver1.2

mootools ver1.2の場合は次のようになります。

window.addEvent('domready', function(){
	var myFx = new Fx.Morph($('nav'),{transition:"back:in"}).set({
	    'height': 0,
	    'opacity': 0
	});

	$('run').addEvent('click', function() {
		var height = $("nav").getStyle('height').toInt();
		if (height > 0){
			myFx.start({
				opacity:0,
	            height: '0px'
       		});
		}else{
			myFx.start({
				opacity:1,
	            height: '50px'
       		});
		}
	});

});

Fx.Stylesは廃止され、Fx.Tween、Fx.Morphになりました。
上記ソースはFx.Morphを使用しています。

直接Elementへtweenがセットできるショートカットメソッドが追加されたので、
透明度や高さなど、何か１つだけ変更したい場合は
Element.tween()やElement.fade()などのショートカットメソッドが便利です。