jquery: «простейшее слайд-шоу» Джонатана Снука о appendTo () - PullRequest
Новая
       8

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

3 голосов
/ 26 июня 2011

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

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

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

"Конец () сбрасывает внутренний jQuery ссылка на оригинал выбор. Таким образом, это : первый ребенок, который я добавляю в конец элемента .fadein, а не Следующий ( '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). Очевидно, что это работает, так может кто-нибудь помочь мне понять или порекомендовать источник, чтобы понять это?

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

1 Ответ

2 голосов
/ 26 июня 2011

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

* 1003 Е.Г. *

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

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

<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 является дорогостоящим и создает много проблем. Было бы лучше, если бы вы могли изменить селектор, это был бы лучший способ сделать это.

...