Ник Морган - JavaScript для детей. Самоучитель по программированию

Fade out —

методом fadeOut. Замените содержимое второго элемента script

исчезать

в dom.html на такой код:

$("h1").fadeOut(3000);

Чтобы найти все элементы h1, мы использовали функцию $.

Поскольку в dom.html элемент h1 всего один (это заголовок с текстом

«Привет, мир!»), именно его мы и получим в виде jQuery-объекта.

Вызывая для этого объекта метод fadeout(3000), мы запускаем зату-

хание заголовка до полного его исчезновения в течение трех секунд.

(Аргумент fadeOut передается в миллисекундах, то есть тысячных

долях секунды, поэтому значение 3000 даст анимацию в три секунды

длиной.)

Когда вы перегрузите страницу с этим кодом, вы увидите, как эле-

мент h1 постепенно исчезает.

Цепной вызов и анимация на jQuery

Если вызвать метод jQuery-объекта, этот метод, как правило, вер-

нет первоначальный объект — тот, для которого он и был вызван.

Например, $("h1") возвращает jQuery-объект со всеми элементами h1,

а $("h1").fadeOut(3000) возвращает все тот же jQuery-объект с эле-

ментами h1. Тогда изменить текст заголовка и включить его затухание

можно так:

$("h1").text("Этот текст скоро исчезнет").fadeOut(3000);

Подобный вызов нескольких методов подряд называют цепным

вызовом .

Можно запустить несколько анимаций одного и того же элемента.

Fade in —

Например, использовать цепной вызов методов fadeOut и fadeIn,

постепенно

чтобы элемент исчез и тут же снова проявился:

усиливаться

$("h1").fadeOut(3000).fadeIn(2000);

152 Часть II. Продвинутый JavaScript

Анимация fadeIn заставляет невидимый элемент

проявиться. jQuery понимает, что, когда вы делаете цеп-

ной вызов двух анимаций, вы, скорее всего, хотите, чтобы

они сработали по очереди, одна после другой. В результате

элемент h1 будет затухать в течение трех секунд, а затем

в течение двух секунд проявляться.

В jQuery есть еще два метода для анимации, похо-

жие на fadeOut и fadeIn, — это slideUp и slideDown.

При вызове slideUp элементы исчезают, уплывая вверх,

а при вызове slideDown появляются, опускаясь сверху.

Замените второй элемент script в dom.html на следую-

щий код и перегрузите страницу:

$("h1").slideUp(1000).slideDown(1000);

Slide

up —

здесь

«поднять»

Здесь мы нашли элемент h1, скрыли его с эффектом уплывания вверх

Slide down —

в течение одной секунды, а затем показали снова, опустив сверху вниз

здесь

за одну секунду.

«опустить»

ПОПР ОБУ ЙТЕ !

Мы применяли fadeIn, чтобы показывать невидимые элементы. Но что если

вызвать fadeIn для элемента, который уже видим, и что будет с элементом,

который следует за элементом, находящимся в процессе анимации?

К примеру, добавьте в dom.html новый элемент p сразу после заголовка.

Используйте slideUp и slideDown, чтобы скрыть и показать элемент h1,

и посмотрите, как поведет себя элемент p. А если использовать fadeOut

и fadeIn?

Что произойдет, если использовать fadeOut и fadeIn для одного

и того же элемента, но без цепного вызова? Например:

$("h1").fadeOut(1000);

$("h1").fadeIn(1000);

Попробуйте поместить этот код внутрь цикла for, настроенного на пять

повторов. Что получится?

Как считаете, что делают jQuery-методы show и hide? Проверьте свои

Show —

догадки на практике. Как может пригодиться hide, если нужно, чтобы уже

показать

видимый элемент постепенно проявился?

Hide — скрыть

9. DOM и jQuery 153

Что мы узнали

В этой главе мы узнали, как модифицировать HTML-страницы