Delay Show List

HTML

<div id="wrap">
<button id="run">run</button>
<ul class="delay-show">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
    <li>リスト6</li>
</ul>
</div>

CSS

body {
	font-size: 13px;
	background: #eae6d3;
	line-height: 1.4;
    padding: 10px;
}
#wrap {
	width: 300px;
	margin: 0 auto;
}
ul.delay-show li {
	background: #fff;
	color: #4a3b35;
	margin-bottom: 5px;
	list-style: none;
	padding: 10px;
	position: relative;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

JavaScript

$(function() {
	function animateList(open) {
    if (open) {
      $('ul.delay-show li')
      	.stop(true, true)
        .css({opacity: 0})
        .each(function(i) {
          $(this)
            .delay(60 * i)
            .animate({ opacity:1 }, 200);
        });
    } else {
      $($('ul.delay-show li').get().reverse())
      	.stop(true, true)
        .css({opacity: 1})
        .each(function(i) {
          $(this)
            .delay(60 * i)
            .animate({ opacity:0 }, 200);
        });
    }
  }
  animateList(true);

  var isOpen = true;
	$('#run').click(function(e) {
		animateList(isOpen = !isOpen);
  });
});