jquery.champagne.js:liタグ要素をランダムにフェードイン表示できるJs



ページ表示の際やクリック時に複数のliタグ要素を
ランダムにフェードイン表示してみます。

1.読込むCSS・JsファイルとJavaScriptの記述例

<link rel="stylesheet" type="text/css" href="champagne.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.champagne.js"></script>

<script type="text/javascript">
$(function () {
	$('ul.champagne').champagne();
});
</script>

2.HTMLの記述例

	<div class="container">

    <ul class="champagne">
    <li class="cat-item cat-item-103"><a href="/category/css" title="CSS に含まれる投稿をすべて表示">CSS</a></li>
    <li class="cat-item cat-item-10"><a href="/category/facebook" title="Facebook に含まれる投稿をすべて表示">Facebook</a></li>
    <li class="cat-item cat-item-14"><a href="/category/html5" title="HTML5 に含まれる投稿をすべて表示">HTML5</a></li>
    <li class="cat-item cat-item-7"><a href="/category/javascript" title="JavaScript に含まれる投稿をすべて表示">JavaScript</a></li>
    <li class="cat-item cat-item-26"><a href="/category/javascript/ajax" title="Ajax に含まれる投稿をすべて表示">Ajax</a></li>
    <li class="cat-item cat-item-8"><a href="/category/javascript/jquery" title="jQuery に含まれる投稿をすべて表示">jQuery</a></li>
    <li class="cat-item cat-item-9"><a href="/category/php" title="PHP に含まれる投稿をすべて表示">PHP</a></li>
    <li class="cat-item cat-item-48"><a href="/category/php/smarty" title="Smarty に含まれる投稿をすべて表示">Smarty</a></li>
    <li class="cat-item cat-item-21"><a href="/category/seo" title="SEO に含まれる投稿をすべて表示">SEO</a></li>
    <li class="cat-item cat-item-4"><a href="/category/wordpress" title="WordPress に含まれる投稿をすべて表示">WordPress</a></li>
    <li class="cat-item cat-item-1"><a href="/category/sonohoka" title="その他 に含まれる投稿をすべて表示">その他</a></li>
    <li class="cat-item cat-item-15"><a href="/category/smartphone" title="スマートフォン に含まれる投稿をすべて表示">スマートフォン</a></li>
    <li class="cat-item cat-item-38"><a href="/category/smartphone/android" title="Android に含まれる投稿をすべて表示">Android</a></li>
    <li class="cat-item cat-item-103"><a href="/category/css" title="CSS">CSS</a></li>
    <li class="cat-item cat-item-10"><a href="/category/facebook" title="Facebook">Facebook</a></li>
    <li class="cat-item cat-item-14"><a href="/category/html5" title="HTML5">HTML5</a></li>
    <li class="cat-item cat-item-7"><a href="/category/javascript" title="JavaScript">JavaScript</a></li>
    <li class="cat-item cat-item-26"><a href="/category/javascript/ajax" title="Ajax">Ajax</a></li>
    <li class="cat-item cat-item-8"><a href="/category/javascript/jquery" title="jQuery">jQuery</a></li>
    <li class="cat-item cat-item-9"><a href="/category/php" title="PHP">PHP</a></li>
    <li class="cat-item cat-item-48"><a href="/category/php/smarty" title="Smarty">Smarty</a></li>
    <li class="cat-item cat-item-21"><a href="/category/seo" title="SEO">SEO</a></li>
    <li class="cat-item cat-item-4"><a href="/category/wordpress" title="WordPress">WordPress</a></li>
    <li class="cat-item cat-item-1"><a href="/category/sonohoka" title="その他">その他</a></li>
    </ul>
    
	</div><!--/container-->

jquery.champagne.js:liタグ要素をランダムにフェードイン表示するデモ

ソース元:champagne.js | fresh tilled soil

じわじわ表示される感が必要な時に使えそうな気がします。