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

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

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

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

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

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

HTML

<div id="vnav">
<ul>
<li>
<h1>Home</h1>

Home page
</li>
<li>
<h1>About Us</h1>

Know About our company
</li>
<li>
<h1>Portfolio</h1>

Check our Portfolio
</li>
<li>
<h1>Contact Us</h1>

Have a question?
</li>
</ul>
</div>

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

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

$(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'})
    });

});