show li one by one with jquery
<p>I'm trying to build a Rotator which would walk through on each li and with delay would show theme one by one. I have the following html structure mixed with php snippets </p>

<pre><code>&lt;div class="product_box"&gt;
&lt;ul id=products&gt;
&lt;?php foreach ($products as $product):?&gt;
    &lt;li&gt;
        &lt;h3&gt;&lt;?php echo $product-&gt;name ?&gt;&lt;/h3&gt;
        &lt;a class= "images" target ="_blank" title="&lt;?php echo $product-&gt;name ?&gt;" href ="&lt;?php echo $product-&gt;link ?&gt;" &gt;
            &lt;img alt="" src="/img/produkte/&lt;?php echo $product-&gt;img ?&gt;"&gt;
        &lt;/a&gt;
        &lt;a id="button" href = "&lt;?php echo $product-&gt;link ?&gt;" target="_blank"&gt;Info&lt;/a&gt;

    &lt;/li&gt;
&lt;?php endforeach;?&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>and I was starting to build the jquery what looks like </p>

<pre><code>&lt;script&gt;

jQuery(document).ready(function($) {
    var totalImages = $("#products &gt; li").length;
    setTimeout(function() {
         $('li:first').fadeIn().next() 
         }, 500);

    });

&lt;/script&gt;
</code></pre>

<p>The problem is that I don't really know how to show the next li and hide the previous. </p>
