title: Animate list items from left one by one
body: <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>