Чтение онлайн

ЖАНРЫ

JavaScript. Подробное руководство, 6-е издание
Шрифт:

х.live(type,handler);

$(x.context).delegate(x.selector, type, handler);

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

die
и
undelegate.
Метод
die
может вызываться с одним или с двумя аргументами. Если методу передать единственный аргумент, определяющий тип события, он удалит все динамические обработчики событий, соответствующие селектору и типу событий. А если передать тип события и функцию обработчика, он удалит только указанный обработчик.
Например:

$('a').die('mouseover'); // Удалит все динамические обработчики

// события mouseover из элементов <а>

$('a' ).die( mouseover', linkHandler); // Удалит только указанный динамический обработчик

Метод

undelegate
действует аналогично методу
die,
но более явно отделяет контекст (элементы, в которых был зарегистрирован внутренний обработчик) и строку селектора. Вызовы метода
die
выше можно было заменить вызовами метода
undelegate,
как показано ниже:

$(document).undelegate('а'); // Удалит все динамические обработчики из элементов <а>

$(document).undelegate('а', ’mouseover); // Удалит динамические обработчики

// события mouseover

$(document).undelegate('а', ’mouseover’, linkHandler); // Указанный обработчик

Наконец, метод

undelegate
может также вызываться вообще без аргументов. В этом случае он удаляет все динамические обработчики, привязанные к выбранным элементам.

19.5. Анимационные эффекты

В главе 16 демонстрировалось, как можно управлять стилями CSS в элементах документа. Например, устанавливая CSS-свойство

visibility
, можно заставлять элементы появляться и скрываться. В разделе 16.3.1 было показано, как, управляя стилями CSS, можно воспроизводить анимационные эффекты. Например, вместо того, чтобы просто сделать элемент невидимым, можно постепенно уменьшать значение его свойства
opacity
в течение половины секунды и заставить его исчезать плавно. Подобные визуальные эффекты оставляют у пользователей более приятные впечатления, и библиотека jQuery упрощает их реализацию.

Объект

jQuery
определяет методы воспроизведения основных визуальных эффектов, такие как
fadeIn
и
fadeOut.
Кроме них он определяет также метод
animate,
позволяющий воспроизводить более сложные эффекты. В следующих подразделах описываются и методы воспроизведения простых эффектов, и более сложный универсальный метод
animate.
Однако для начала познакомимся с некоторыми общими особенностями механизма анимационных эффектов в библиотеке jQuery.

Каждый анимационный эффект имеет продолжительность, которая определяет, как долго должен продолжаться эффект. Продолжительность можно указать в виде числа миллисекунд или в виде строки. Строка «fast» означает 200 миллисекунд. Строка «slow» означает 600 миллисекунд. Если указать строку, которая не будет распознана библиотекой jQuery, по умолчанию будет использована продолжительность 400 миллисекунд. Имеется возможность определять новые названия, обозначающие продолжительность, добавляя новые отображения строк в числа в объект

jQuery.fx.speeds
:

jQuery.fx.speeds["medium-fast"] = 300;

jQuery.fx.speeds["medium-slow"] = 500;

Методы

воспроизведения эффектов объекта
jQuery
обычно принимают продолжительность в первом необязательном аргументе. Если опустить этот аргумент, по умолчанию продолжительность будет составлять 400 миллисекунд. Однако некоторые методы, не получив аргумент с продолжительностью, выполняют операцию немедленно, без анимационного эффекта:

$("#message").fadeIn; // Эффект проявления будет длиться 400 мсек

$("#message").fadeOut("fast"); // Эффект растворения будет длиться 200 мсек

Эффекты в библиотеке jQuery воспроизводятся асинхронно. Когда производится вызов метода анимационного эффекта, такого как

fadeIn
, он сразу же возвращает управление, а воспроизведение эффекта выполняется «в фоновом режиме». Поскольку методы анимационных эффектов возвращают управление до того, как эффект завершится, многие из них принимают во втором аргументе (также необязательном) функцию, которая будет вызвана по окончании воспроизведения эффекта. Этой функции не передается никаких аргументов, но ссылка
this
в ней будет указывать на элемент документа, к которому применялся эффект. Функция будет вызвана по одному разу для каждого выбранного элемента:

// Быстро проявить элемент, а когда он станет видимым, вывести в нем текст.

$("#message").fadeIn("fast", function { S(this). text(Привет, Мир! "); });

Передача функции обратного вызова методу воспроизведения эффекта позволяет выполнять действия по его окончании. Однако в этом нет необходимости, когда требуется просто последовательно воспроизвести несколько эффектов. По умолчанию библиотека jQuery ставит анимационные эффекты в очередь (в разделе 19.5.2.2 демонстрируется, как изменить это поведение по умолчанию). Если вызвать метод анимационного эффекта относительно элемента, для которого уже воспроизводится анимационный эффект, воспроизведение нового эффекта не начнется немедленно, а будет отложено до окончания воспроизведения текущего эффекта. Например, можно заставить элемент «моргать», пока он не проявится окончательно:

$("«blinker").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn;

Методы анимационных эффектов объекта

jQuery
принимают необязательные аргументы, определяющие продолжительность и функцию обратного вызова. Однако этим методам можно также передавать объект, свойства которого определяют параметры эффектов:

// Передать продолжительность и функцию не в отдельных аргументах, а в свойствах объекта

$("#message").fadeIn({ duration: "fast",

complete: function { $(this).text("Привет, Мир!"); }

});

Этот прием с передачей объекта обычно применяется при использовании универсального метода

animate,
но он также может применяться и при работе с методами простых анимационных эффектов. Использование объекта позволяет также определять и другие, расширенные параметры, такие как параметры управления очередью и переходами эффектов. Доступные параметры будут описаны в разделе 19.5.2.2.

Поделиться с друзьями: