jquery: Jonathan Snook's "simplest slideshow" question about appendTo()

Question

Smallest slideshow i've ever seen.

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

Reading the page where he explains this small bit of code, near the end he says

"The end() resets jQuery's internal reference back to the original selection. That way, it's the :first-child that I'm appending to the end of the .fadein element and not the next('img')."

QUESTION: So if at the end of the slideshow, he appends the first slide (:first-child) on to the end of the slideshow once it's cycled through all the images, then where does the second slide come from when the slideshow goes through it's second iteration? I guess I don't understand how appending the first slide onto the end of the slideshow works, when the rest aren't appended. After it shows the last slide, it appends the first slide onto the end, but then that's the last slide, so The end() resets jQuery's internal reference back to the original selection. That way, it's the :first-child that I'm appending to the end of the .fadein element and not the next('img'). would be nothing because we've only appended the first slide (:first-child). Obviously it does work, so could someone help me understand or recommend a source to understand this?

Edit: also, couldn't it crossfading be not the best thing? wouldn't it be better to fade in the new image, then hide the last image? could the cross fade mess up and show the white background in some browser for some reason?

Answer 1

S/he keeps manipulating the DOM by taking always the first child element of the selector and appending it to the end. So if at iteration one s/he appended the first child to the end, on the next iteration the first child would be the one that was second on the first iteration, and so on...

E.g.

First Iteration

a. Before first iteration:

<img src="image1.jpg" />
<img src="image2.jpg" />

b. After first iteration:

<img src="image2.jpg" />
<img src="image1.jpg" />

Second Iteration

a. Before second iteration:

<img src="image2.jpg" />
<img src="image1.jpg" />

b. After second iteration:

<img src="image1.jpg" />
<img src="image2.jpg" />

I think this is a bad way to go about making slideshows. DOM manipulation is costly and creates a lot of trouble. It would be better if you can change the selector it would be the best way to go about it.