[JS]アニメーションの動きがキモチイイ、アコーディオンのスクリプト

ストンッと緩急のある動きをするアニメーションが気持ちいいアコーディオンを実装するチュートリアルをTutorialzineから紹介します。

Making a Fresh Content Accordion
demo

アコーディオンはリスト要素で実装されており、開いた時の子供は入れ子のリスト要素になります。
そのため数には特に制限はありません。

HTML

二番目のみ抜粋

<li class="button"><a href="#" class="orange">Oranges <span></span></a></li>
<li class="dropdown">
<ul>
<li><a href="#" onclick="$('.button a:last').click();return false;">Open Last Section</a></li>
<li><a href="http://en.wikipedia.org/wiki/Orange_%28fruit%29">Wikipedia Page</a></li>
<li><a href="http://www.flickr.com/search/?w=all&q=oranges&m=text">Flickr Photos</a></li>
</ul>
</li>

アコーディオンの開閉とアニメーションはjQueryがベースとなっており、jQuery Easing Pluginを使用して緩急をつけています。

Post on:2009年12月10日