title: jquery content slider
body: <p>I am trying to work on a content slider with effects similar to this website:<a href="http://monitter.com/" rel="nofollow noreferrer">Monitter</a></p>
  <p>Unlike this website, I don't want to include any real time twitter updates. I just want the content in div's to be loaded in a similar fashion.</p>
  <p>I have already looked at various jquery plugins having vertical content slider, but none of them seem to have the desired effect.</p>
  <p>Lastly, I am not looking for entire code, but just some little help so that I can start working in the right direction.</p>
  <p>Edit: There needs to be a time delay between successive div's so that the user can go through content in each div.</p>
  <p>Edit: I think I should clarify with some code sample this time. I apologize for not geeting to this earlier:
  Here's the sample data in <strong>jsondata.php</strong> file</p>
  <pre><code>&lt;?php
     $json = '{
          &quot;userdata&quot;: [
              {
                  &quot;first&quot;:&quot;James&quot;,
                  &quot;last&quot;:&quot;Watt&quot;,
                  &quot;email&quot;:&quot;jw@abc.edu&quot;,
                  &quot;city&quot;:&quot;xyz&quot;
              },
              {
                  &quot;first&quot;:&quot;Isaac&quot;,
                  &quot;last&quot;:&quot;Newton&quot;,
                  &quot;email&quot;:&quot;int@def.edu&quot;,
                  &quot;city&quot;:&quot;xyz&quot;
              },
              {
                  &quot;first&quot;:&quot;Albert&quot;,
                  &quot;last&quot;:&quot;Einstein&quot;,
                  &quot;email&quot;:&quot;ae@ghi.edu&quot;,
                  &quot;city&quot;:&quot;xyz&quot;
              }
                        ]
                     }';
                   echo $json;
  ?&gt;
  </code></pre>
  <p>Following is the <strong>index.html</strong> file:</p>
  <pre><code> &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;
          &lt;title&gt;Untitled Document&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style2.css&quot; /&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;lib/jquery/jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;text/javascript&quot;&gt;
              $(document).ready(function(){
                  $(&quot;#loaduserdata&quot;).click(function(){
                  $(&quot;#info&quot;).empty(); 
              $.getJSON(
              &quot;jsondata.php&quot;,
              function(data){
                  $.each(data.userdata, function(i,user){
                      var html = '&lt;div class=&quot;entry&quot;&gt;';
                          html += &quot;&lt;p&gt;&quot;+user.first+&quot;&lt;/p&gt;&quot;;
                          html += &quot;&lt;p&gt;&quot;+user.last+&quot;&lt;/p&gt;&quot;;
                          html += &quot;&lt;p&gt;&quot;+user.email+&quot;&lt;/p&gt;&quot;;
                          html += &quot;&lt;p&gt;&quot;+user.city+&quot;&lt;/p&gt;&quot;;
                          html += '&lt;/div&gt;';
                      $(html).appendTo('#info');
                  });
              });
      });
      
  });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;a href=&quot;#&quot; id=&quot;loaduserdata&quot;&gt;User Data&lt;/a&gt;
          &lt;div id=&quot;info&quot;&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Now, clicking on user data will quickly populate all the data in the div with class entry. What I am looking for is populating the data in a style similar to the monitter website, that is, the data should populate slowly with a time delay.
  This is some sample code. Kindly correct me if I am heading in the wrong direction.</p>