ボタンやリンククリックでフェードインアウトさせるサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものです。追記で1.2の解説もしてます。
1 2 3 4 5 6 7 8 9 | $('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 });}}); |
1 2 | <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の場合は次のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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()などのショートカットメソッドが便利です。