Question

I have something like this

<div id="dis_image"></div>

<div id="images">
<img src="1/1.jpg" class="image" style="opacity:0.3" />
<img src="1/2.jpg" class="image" style="opacity:0.3" />
</div>

<ul style="display:none" id="images_list">
<li>testing 1</li>
<li>testing 2</li>
</ul>

What i am planning to do is every 5 seconds, i want the first text from id:images_list to display on id:dis_images and id:images 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

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

jquery:

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);

Answer 1

appendTo() method moves the element, so you are removing your element from the list, and in next iterations, it doesn’t exist. Try clone().