title: How to show/hide an unordered list that is generated
body: <p>I am using <a href="https://codepen.io/jasonmayes/pen/Ioype" rel="nofollow noreferrer">this</a> code to generate the last 5 tweets from a given user. </p>
  
  <p>What I am trying to do is to show each tweet one at a time. </p>
  
  <p>I've modified the script so that the generated <code>&lt;ul&gt;</code> has an id. You can see the change I made on line 6 of the script.</p>
  
  <p>Here is the script I'm using:</p>
  
  <pre><code>$(document).ready(function () {
  var tweets = $('#tweetlist li').hide();
      i = 0;
  
  (function cycle() { 
  
      tweets.eq(i).fadeIn(600)
                .delay(4000)
                .fadeOut(600, cycle);
  
      i = ++i % tweets.length;
  
  })();
  });
  </code></pre>
  
  <p>For some reason it just doesn't work. I have jquery called before both scripts, but the list still shows all of the items. </p>
  
  <p>Here is the jsfiddle I've been using:
  <a href="http://jsfiddle.net/wulfmann/qst8atkk/1/" rel="nofollow noreferrer">http://jsfiddle.net/wulfmann/qst8atkk/1/</a></p>
  
  <p>The weird thing is that if I build the list myself it works.</p>
  
  <p>I have a feeling that I'm missing something fundamental. Admittedly I have not gone through the twitter script code line by line, so I may have missed something there. </p>
  
  <p>I am learning jquery and javascript now so I'd just like to make sure I'm not missing something basic.</p>
  
  <p>edit: In the attached jsfiddle I've unminified the js so that you can see.</p>