Может кто-нибудь помочь мне понять этот фрагмент кода за строкой
var $elements = $('#One, #Two, #Three, #Four');
function anim_loop(index) {
$elements.eq(index).fadeIn(1000, function() {
var $self = $(this);
setTimeout(function() {
$self.fadeOut(1000);
anim_loop((index + 1) % $elements.length);
}, 3000);
});
}
anim_loop(0); // start with the first element
Полный пример http://jsfiddle.net/w5YHY/
В частности, у меня есть следующие вопросы:
Зачем использовать setTimeOut здесь?
Что такое var $ self = $ (this); делать?
Что делает anim_loop ((index + 1)% $ elements.length); имею в виду?
Функция anim_loop называется рекурсивной и будет загружать элемент по индексу в $elements
. В то же время текущий элемент будет исчезать.
function anim_loop(index) {//function takes an integer index
$elements.eq(index)//get the element at index
.fadeIn(1000, function() {//fade in element over 1000ms and call passed function when done fading in
var $self = $(this); //wrap current element with jQuery so we can use helpers
setTimeout(function() {//create a timeout when the current element is being displayed
$self.fadeOut(1000);//hide current element
var nextIndex = (index + 1) % $elements.length; //next index in $elements (currentIndex add 1 mod length)
anim_loop(nextIndex);//load next element
}, 3000);
});
}
Получить элемент в позиции index
. ' fadeIn()
' означает, что вы хотите показать элемент в '1000' miliseconds (1 second)
. Блок-код внутри метода, который он сделает после '1000' miliseconds
. Итак, у вас есть первое. Переменная self, которая является элементом, который вы зацикливаете. Во-вторых, у вас есть setTimeOut()
, это означает, что блок-код внутри него будет работать после '3000' miliseconds
. Затем " self.fadeOut(1000)
" скроет текущий элемент, а затем код снова вызовет этот метод, чтобы выполнить работу со следующим элементом.
Зачем использовать setTimeOut здесь? => SettimeOut is used to make sure the element is displayed for only 3 sec (3000), after 3sec hide the element and get the next element in line.
Что такое var $ self = $ (this); делать? It get reference to the member on which the current function is invoked.
Что делает anim_loop ((index + 1)% $ elements.length); имею в виду?
This means: whatever the current index is + 1 = next element, Now if index is the last element currently it needs to get back to zero hence it doing a modulus with the length which get you back to the first element.
Способ работы модуля - это возврат только остатка.
setTimeout
задерживает выполнение функции в течение определенного периода (см. документ). Я добавил еще несколько комментариев и переменных, чтобы вы могли видеть, что происходит более четко.