jQuery: «Простейший слайд-шоу» Джонатана Снука о appendTo()

Question

Наименьшее слайд-шоу, которое я когда-либо видел.

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

Чтение the page, где он объясняет этот маленький кусочек кода, в конце он говорит

«Конец() сбрасывает внутренний ссылку JQuery обратно к первоначальному выбора. Таким образом, это : первый ребенок, который я добавляю к концу элемента .fadein, а не next ('img').

ВОПРОС: Так что, если в конце слайд-шоу, он добавляет первый слайд (:first-child) на до конца слайд-шоу, как только это циклическое через все изображения, то где же второй слайд приходят от того, когда слайд-шоу проходит через вторую итерацию? Наверное, я не понимаю, как добавление первого слайда в конец слайд-шоу работает, когда остальные не добавляются. После того, как он показывает последний слайд, он добавляет первый слайд к концу, но тогда это последний слайд, поэтому 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'). не будет ничего, потому что мы добавили только первый слайд (:first-child). Очевидно, что это работает, может ли кто-нибудь помочь мне понять или порекомендовать источник, чтобы понять это?

Редактировать: также, не мог ли он перекрестно увязать не лучшее? не было бы лучше увядать в новом изображении, а затем скрыть последнее изображение? может ли крест затухать и показать белый фон в каком-то браузере по какой-то причине?

Answer 1

Он/она продолжает манипулировать DOM, всегда беря на себя первый дочерний элемент селектора и добавляя его в конец. Так что, если на итерации один из них добавит первого ребенка до конца, на следующей итерации первый ребенок будет вторым, который был вторым на первой итерации, и так далее ...

E.g.

Первая итерация

а. Перед первой итерации:

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

б. После первой итерации:

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

Второй Итерация

а. Перед второй итерации:

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

б. После второй итерации:

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

Я думаю, что это плохой способ идти о создании слайд-шоу. Манипуляция DOM является дорогостоящей и создает массу проблем. Было бы лучше, если бы вы могли изменить селектор, это был бы лучший способ сделать это.