Animate list items from left one by one
<p>How can I animate list items to slide from the left and fade in one by one? With animation starting 1 s after the button is clicked?</p>

<p>HTML:</p>

<pre><code>&lt;button&gt;Click&lt;/button&gt;

&lt;ul&gt;  
  &lt;li&gt;One&lt;/li&gt;
  &lt;li&gt;Two&lt;/li&gt;
  &lt;li&gt;Three&lt;/li&gt;
  &lt;li&gt;Four&lt;/li&gt;
  &lt;li&gt;Five&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>CSS:</p>

<pre><code>ul {list-style-type: none; display:none;}
</code></pre>

<p>JS:</p>

<pre><code>$("button").click(function(){

  $("ul").fadeIn();

});
</code></pre>

<p>CodePen:</p>

<p><a href="http://codepen.io/i76/pen/YGkaZv" rel="nofollow">http://codepen.io/i76/pen/YGkaZv</a></p>