JQuery | creator note

06-17-10

jQueryとmootoolsでアコーディオンアニメーションを試す

JavaScriptのライブラリでよく使われるのはjQueryだと思います。他にもspryフレームワークや、Yahoo UIライブラリなどもありますが、mootoolsというライブラリはあまり多くは知られていないライブラリだと思います。

▼mootools.js
mootools配布元：http://mootools.net/download
mootools本家サイト：http://mootools.net/
日本語ドキュメントサイト：http://takahashifumiki.com/category/web/mootools/

そんなmootoolsですが、いったいjQueryとどっちを使ったらいいの？というのがあり、「jQuery vs MooTools」と題された記事がありましたのでご紹介します。

▼jQuery vs MooTools
和訳：http://takahashifumiki.com/web/programing/642/
本家：http://jqueryvsmootools.com/

とか言われても、、、実際に見てみないとわからないので、アコーディオンアニメーションをするサンプルを、jQueryとmootoolsで再現してみました。

jQueryでのアコーディオン

新しいMacBook

10時間駆動するバッテリー。
一体型のバッテリーは、1回の充電で最長10時間駆動します。2これからは、コンセントにつながなくても、MacBookをオンラインでさらに長時間使えます。

ガラス製のマルチタッチトラックパッド。
広々としたトラックパッドで、マルチタッチジェスチャーなどの操作が思いのまま。慣性スクロールを使って、ページを上下にすばやく移動できます。

耐久性のあるユニボディ。
わずか2.74cmの薄さ、2.13k3の軽さのMacBookは、なめらかで耐久性のあるユニボディで登場です。どんなバッグにもすっきりと収まります。

新しいMacBookPro

次世代NVIDIAグラフィックス。
MacBook史上最速のグラフィックスを搭載したMacBook Proは、3Dゲームから写真やビデオまで、どんなことをする時も抜群のパフォーマンスを発揮します。

高精度アルミニウムユニボディ。
一枚のアルミ板から削り出された新しいボディを持つMacBook Proは、薄さ、軽さ、洗練された美しさ、そして抜群の耐久性を兼ね備えています。

Adobe Web Premium CS5

jQueryでのアコーディオンのソースコード

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
    $("#accordion div.element:not(:first)").css("display","none");
    $("#accordion div.toggler").click(function(){
        if($("+div.element",this).css("display")=="none"){
            $("#accordion div.element").slideUp("slow");
            $("+div.element",this).slideDown("slow");
        }
    });
});
//-->
</script>
<div id="accordion">
<div class="toggler">１段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>

<div class="toggler">２段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>

<div class="toggler">３段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>
</div>

mootoolsでのアコーディオン

新しいMacBook

新しいMacBookPro

Adobe Web Premium CS5

mootoolsでのアコーディオンのソースコード

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
<!--
window.addEvent('domready', function(){
	var myAccordion = new Accordion($('accordion'), 'div.toggler', 'div.element');
});
//-->
</script>
<div id="accordion">
<div class="toggler">１段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>

<div class="toggler">２段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>

<div class="toggler">３段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>
</div>

どうですか？？あまりよくわからないかもしれませんが、他のブラウザ、IE6とかsafariとかでも確認してみてください。僕の雑感は、jQueryは、ややアニメーションがガタガタ動いているように見えるのに対して、mootoolsのほうはスムーズに動いているように見えます。しかも、mootoolsのnew Accordion(引数)は最小限のパラメータのみを記入しているのに、ファーストビューで最初のコンテンツが下へビョーンと動くのがわかります。さらに、透明度ゼロからじわじわ100％濃度にアニメーションもしています。jQueryで同様の演出を加えるには、更にパラメータが必要になりますが、mootoolsではデフォルトの記述で細かい演出が設定されてて、とても簡単に導入できるというのがわかりました。

これだけの結果では一概にどれがいいとは断言できませんが、アニメーションはmootoolsのほうが得意そうな印象を受けましたので、簡単に演出を加えたい方は参考にしてみてはいかがでしょうか。ではまたー