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="post-item post-item-69"><a href="https://dad-union.com" title="DAD UNION">DAD UNION</a></li>


 	<li class="post-item post-item-78"><a href="https://dad-union.com/category/javascript" title="JavaScript">JavaScript</a></li>


 	<li class="post-item post-item-75"><a href="https://dad-union.com/category/jquery" title="jQuery">jQuery</a></li>


 	<li class="post-item post-item-60"><a href="https://dad-union.com/category/php" title="PHP">PHP</a></li>


 	<li class="post-item post-item-57"><a href="https://dad-union.com/category/css">css</a></li>


 	<li class="post-item post-item-69"><a href="https://dad-union.com" title="DAD UNION">DAD UNION</a></li>


 	<li class="post-item post-item-78"><a href="https://dad-union.com/category/javascript" title="JavaScript">JavaScript</a></li>


 	<li class="post-item post-item-75"><a href="https://dad-union.com/category/jquery" title="jQuery">jQuery</a></li>


 	<li class="post-item post-item-60"><a href="https://dad-union.com/category/php" title="PHP">PHP</a></li>


 	<li class="post-item post-item-57"><a href="https://dad-union.com/category/css">css</a></li>


 	<li class="post-item post-item-69"><a href="https://dad-union.com" title="DAD UNION">DAD UNION</a></li>


 	<li class="post-item post-item-78"><a href="https://dad-union.com/category/javascript" title="JavaScript">JavaScript</a></li>


 	<li class="post-item post-item-75"><a href="https://dad-union.com/category/jquery" title="jQuery">jQuery</a></li>


 	<li class="post-item post-item-60"><a href="https://dad-union.com/category/php" title="PHP">PHP</a></li>


 	<li class="post-item post-item-57"><a href="https://dad-union.com/category/css">css</a></li>


 	<li class="post-item post-item-69"><a href="https://dad-union.com" title="DAD UNION">DAD UNION</a></li>


 	<li class="post-item post-item-78"><a href="https://dad-union.com/category/javascript" title="JavaScript">JavaScript</a></li>


 	<li class="post-item post-item-75"><a href="https://dad-union.com/category/jquery" title="jQuery">jQuery</a></li>


 	<li class="post-item post-item-60"><a href="https://dad-union.com/category/php" title="PHP">PHP</a></li>


 	<li class="post-item post-item-57"><a href="https://dad-union.com/category/css">css</a></li>


 	<li class="post-item post-item-69"><a href="https://dad-union.com" title="DAD UNION">DAD UNION</a></li>


 	<li class="post-item post-item-78"><a href="https://dad-union.com/category/javascript" title="JavaScript">JavaScript</a></li>


 	<li class="post-item post-item-75"><a href="https://dad-union.com/category/jquery" title="jQuery">jQuery</a></li>


 	<li class="post-item post-item-60"><a href="https://dad-union.com/category/php" title="PHP">PHP</a></li>

</ul>

    
</div>
<!--/container-->

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

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

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