[JS]バウンスのモーションが楽しい垂直型のアコーディオンを実装するチュートリアル

サイト構築 -JavaScript

Post on:2010年5月13日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp

開閉時に弾むようなバウンスのモーションをつけたアコーディオンをjQueryで実装するチュートリアルをWeb Designers Deskから紹介します。

Create Bounce out Vertical menu with jQuery
デモページ

画像は一切使用していないので、カスタマイズも簡単にできると思います。

実装にはjquery.jsとアニメーションで使用しているプラグイン「jQuery Easing Plugin」が必要です。

HTMLはシンプルで、リスト要素を使用しています。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<div id="vnav">
	<ul>
		<li><h1>Home</h1><p>Home page</p></li>
		<li><h1>About Us</h1><p>Know About our company</p></li>
		<li><h1>Portfolio</h1><p>Check our Portfolio</p></li>
		<li><h1>Contact Us</h1><p>Have a question?</p></li>
	</ul>
</div>
</textarea>

<ul>

<li><h1>About Us</h1><p>Know About our company</p></li>

<li><h1>Portfolio</h1><p>Check our Portfolio</p></li>

<li><h1>Contact Us</h1><p>Have a question?</p></li>

</ul>

</div>

</textarea>

CSSは角丸とボックスシャドウでCSS3を使用しており、CSS3非対応ブラウザでは矩形影無しで表示されます。

JavaScriptは前述の2ファイルに、下記のスクリプトを追加するのみです。

<textarea name="code" class="js" cols="60" rows="5">
$(document).ready(function(){

    //When Mouse rolls over li
    $("li").mouseover(function(){
        $(this).stop().animate({height:'60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When Mouse cursor removed from li
    $("li").mouseout(function(){
        $(this).stop().animate({height:'20px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});
</textarea>