jquery fadeout text and image opacity changes
<p>I have something like this</p>

<pre><code>&lt;div id="dis_image"&gt;&lt;/div&gt;

&lt;div id="images"&gt;
&lt;img src="1/1.jpg" class="image" style="opacity:0.3" /&gt;
&lt;img src="1/2.jpg" class="image" style="opacity:0.3" /&gt;
&lt;/div&gt;

&lt;ul style="display:none" id="images_list"&gt;
&lt;li&gt;testing 1&lt;/li&gt;
&lt;li&gt;testing 2&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>What i am planning to do is every 5 seconds, i want the first text from <code>id:images_list</code> to display on <code>id:dis_images</code> and <code>id:images</code> first image changes opacity from 0.3 to 1
then, proceed to second one, first text and first image is replaced by second text and second image and so with opacity. The first image should return to its normal opacity 0.3</p>

<p>I have tried this but its not working correctly as it is stopped at last.</p>

<p>jquery:</p>

<pre><code>setInterval(function() {
    $("#dis_image").html("");
    $('#images_list :nth-child(1)').next().show().fadeOut(1200).appendTo('#dis_image');
    $('#images :nth-child(1)').next().css({ opacity: 1 });

} , 5000);
</code></pre>
