Simplest jQuery slideshow code explanation

Jonathan Snook wrote a blog titled Simplest jQuery SlideShow. Checkout the demo page. The full JavaScript code in its entirety is given below. If you understand this code then you don't need to read rest of the article.

$(function () {
  $(".fadein img:gt(0)").hide();
  setInterval(function () {
    $(".fadein :first-child")
      .fadeOut()
      .next("img")
      .fadeIn()
      .end()
      .appendTo(".fadein");
  }, 3000);
});

appendTo removes and attaches elements

In order to understand what's going on above, I am constructing a simple test page. Here is the html markup.

<div id="container">
  <div class="lab">This is div1</div>
  <div class="lab">This is div2</div>
</div>

Open this page in browser and execute following command in firebug.

$(".lab:first").appendTo("#container");

Run the above command 5/6 times to see its effect. Every single time you run JavaScript the order is changing.

The order of div elements with class lab is changing because if a jQuery element is already part of document and that element is being added somewhere else then jQuery will do cut and paste and not copy and paste . Again elements that already exist in the document get plucked out of document and then they are inserted somewhere else in the document.

Back to the original problem

In the original code the very first image is being plucked out of document and that image is being added to set again. In simpler terms this is what is happening. Initially the order is like this.

Image1
Image2
Image3

After the code is executed the order becomes this.

Image2
Image3
Image1

After the code is executed again then the order becomes this.

Image3
Image1
Image2

After the code is executed again then the order becomes this.

Image1
Image2
Image3

And this cycle continues forever.