В этом видео-кратком совете я научу вас, как добавить немного изящества на вашу страницу, последовательно отображая набор элементов. Хотя существует множество способов решения этой задачи, сегодня мы рассмотрим один метод, использующий рекурсивные функции.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
// Wrapping, self invoking function prevents globals
(function() {
// Hide the elements initially
var lis = $(‘li’).hide();
// When some anchor tag is clicked.
$(‘a’).click(function() {
var i = 0;
// FadeIn each list item over 200 ms, and,
// when finished, recursively call displayImages.
// When eq(i) refers to an element that does not exist,
// jQuery will return an empty object, and not continue
// to fadeIn.
(function displayImages() {
lis.eq(i++).fadeIn(200, displayImages);
})();
});
})();
|
Вывод
Что делает это использование эффективным, так это тот факт, что когда lis.eq(i) ссылается на элемент, который не существует в упакованном наборе, будет возвращен пустой объект jQuery. Когда это происходит, последующие методы в цепочке ( fadeIn ) никогда не будут вызваны.