Цикл и анимация с помощью setTimeOut

0

Может кто-нибудь помочь мне понять этот фрагмент кода за строкой

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); имею в виду?

Теги:

3 ответа

1
Лучший ответ

Функция 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);
            });
}
  • 0
    Зачем использовать setTimeOut здесь? Что значит var $ self = $ (this); делать? Что делает anim_loop ((index + 1)% $ elements.length); значит?
  • 0
    @ user2983762 setTimeout задерживает выполнение функции в течение определенного периода (см. документ). Я добавил еще несколько комментариев и переменных, чтобы вы могли видеть, что происходит более четко.
Показать ещё 4 комментария
0

Получить элемент в позиции index. ' fadeIn() ' означает, что вы хотите показать элемент в '1000' miliseconds (1 second). Блок-код внутри метода, который он сделает после '1000' miliseconds. Итак, у вас есть первое. Переменная self, которая является элементом, который вы зацикливаете. Во-вторых, у вас есть setTimeOut(), это означает, что блок-код внутри него будет работать после '3000' miliseconds. Затем " self.fadeOut(1000) " скроет текущий элемент, а затем код снова вызовет этот метод, чтобы выполнить работу со следующим элементом.

0

Зачем использовать 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.

Способ работы модуля - это возврат только остатка.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню