Memo > mootools > デモをパクる (Fxutils.js)

今回はblock要素の高さ、幅、透明度変更エフェクト(アニメーション)の関連です。

注意、そのまま使える感じにようにパクったつもりですが、もちろんmootools.jsを読み込んでいるのが条件です。今回のデモも「subversion(svn)版しか対応していない」っぽいです。mootoolsの右側のメニューの「svn」をクリックするとダウンロードできます。

Fx.Height 高さ変更

このデモは特定のdivの高さを「Fx.Height」を使ってアニメーションをしながら変更します。以下の「上下に閉じたり開いたり」をクリックすると、閉じたり開いたりします。Fx.Heightのtoggleメソッドを呼び出して実現しているのですが、HTML(CSS)側での注意があります。padding等を利用したい場合は変更したいblock要素(今回はdiv)の上位にラッパの要素が必要であるという事です。該当要素にpaddingが入っているとtoggleが上手く働きません。
「高さを自分で設定」ではtoggleではなくcustomで引数を与えて「0px～50px」で高さ調整するようにしています。

上下に閉じたり開いたり高さを自分で設定

寿限無、寿限無、五劫のすりきれ、海砂利水魚の水行末、雲来末、風来末、食う寝るところに住むところ、やぶらこうじのぶらこうじ、パイポパイポ、パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの長久命の長助。

html code

<a id="demo1run1" href="javascript:void(0)" style="padding:5px; border:1px dotted #CCCCCC; background: #EEEEEE;">上下に閉じたり開いたり</a>
<a id="demo1run2" href="javascript:void(0)" style="padding:5px; border:1px dotted #CCCCCC; background: #EEEEEE;">高さを自分で設定</a>
<div style="background:#EEEEEE; color:#111; width:200px; padding:10px;">
<div id="demo1">
寿限無、寿限無、五劫のすりきれ、海砂利水魚の水行末、雲来末、風来末、食う寝るところに住むところ、やぶらこうじのぶらこうじ、パイポパイポ、パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの長久命の長助。
</div>
</div>

javascript code

download: http://jigen.aruko.net/_ext/post/362/01.js

var demo1effect = new Fx.Height(‘demo1‘);
$(‘demo1run1‘).addEvent(‘click‘, function(){
demo1effect.toggle();
});
$(‘demo1run2‘).addEvent(‘click‘, function(){
demo1effect.custom(0, 50);
});

スポンサードリンク

Fx.Width 幅変更

このデモは特定のdivの幅を「Fx.Width」を使ってアニメーションをしながら変更します。以下の「左右に閉じたり開いたり」をクリックすると、閉じたり開いたりします。Fx.Heightの時と同様に該当要素にpaddingが入っているとtoggleが上手く働きません。またcss的に当たり前の話ですがheight要素を入れておくとアコーディオンのような動きになります(当たり前か・・・)。
「幅を自分で設定」ではtoggleではなくcustomで引数を与えて「0px～300px」で幅調整するようにしています。

左右に閉じたり開いたり幅を自分で設定

html code

<a id="demo2run1" href="javascript:void(0)" style="padding:5px; border:1px dotted #CCCCCC; background: #EEEEEE;">左右に閉じたり開いたり</a>
<a id="demo2run2" href="javascript:void(0)" style="padding:5px; border:1px dotted #CCCCCC; background: #EEEEEE;">幅を自分で設定</a>
<div id="demo2" style="background:#EEEEEE; color:#111; width:200px; height:200px;">
寿限無、寿限無、五劫のすりきれ、海砂利水魚の水行末、雲来末、風来末、食う寝るところに住むところ、やぶらこうじのぶらこうじ、パイポパイポ、パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの長久命の長助。
</div>

javascript code

download: http://jigen.aruko.net/_ext/post/362/02.js

var demo2effect = new Fx.Width(‘demo2‘);
$(‘demo2run1‘).addEvent(‘click‘, function(){
demo2effect.toggle();
});
$(‘demo2run2‘).addEvent(‘click‘, function(){
demo2effect.custom(0, 300);
});

Fx.Opacity 幅変更

このデモは特定のdivの透明度を「Fx.Opacity」を使って徐々に変更します。以下の「消したり見せたり」をクリックすると、透明度を0の状態から完全に見えている1の状態に行き来します。注意としてはIEでの事を考えた場合、該当要素の幅(width)と高さ(height)を指定した方が良いとの事(多分IEの場合は擬似的にバックグランド貼ってると思われ)。また背景色が設定されていない場合はテキストがギザギザに見えることがあるみたいです。
「透明度を自分で設定」ではtoggleではなくcustomで引数を与えて「1～0.5」(完全に見えている状態から半分50%見えている状態)で透明度調整するようにしています。

消したり見せたり透明度を自分で設定

html code

<a id="demo3run1" href="javascript:void(0)" style="padding:5px; border:1px dotted #CCCCCC; background: #EEEEEE;">消したり見せたり</a>
<a id="demo3run2" href="javascript:void(0)" style="padding:5px; border:1px dotted #CCCCCC; background: #EEEEEE;">透明度を自分で設定</a>
<div id="demo3" style="background:#111111; color:#EEEEEE; width:200px; height:200px; padding: 10px;">
寿限無、寿限無、五劫のすりきれ、海砂利水魚の水行末、雲来末、風来末、食う寝るところに住むところ、やぶらこうじのぶらこうじ、パイポパイポ、パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの長久命の長助。
</div>

javascript code

download: http://jigen.aruko.net/_ext/post/362/03.js

var demo3effect = new Fx.Opacity(‘demo3‘);
$(‘demo3run1‘).addEvent(‘click‘, function(){
demo3effect.toggle();
});
$(‘demo3run2‘).addEvent(‘click‘, function(){
demo3effect.custom(1, 0.5);
});

スポンサードリンク