На этом шаге мы рассмотрим методы, используемые для создания таких эффектов.
Иногда вместо однократного изменения отображения элементов, как в предыдущем примере, бывает необходимо переключение их видимости. Эффекта переключения можно добиться, если на первом этапе проверить видимость соответствующего набора элементов, а затем вызвать подходящий метод. Снова используя эффекты проявления и растворения, мы можем изменить пример сценария, как показано ниже:
$(document).ready(function() {
var $firstPara = $('p:eq(1)');
$firstPara.hide();
$('a.more').click(function() {
if ($firstPara.is(':hidden')) {
$firstPara.fadeIn('slow');
$(this).text('Готово');
} else {
$firstPara.fadeOut('slow');
$(this).text('Далее');
}
return false;
});
});
Посмотреть в действии этот эффект можно, воспользовавшись рисунком 1.
Рис.1. Медленное проявление второго абзаца
Полный текст этого примера можно взять здесь.Как и в уже приведенных шагах, мы применяем кэширование селектора, чтобы избежать необходимости повторной операции обхода дерева DOM. Примечательно также, что на этот раз мы не скрываем ссылку, на которой был произведен щелчок, а просто изменяем ее текст.
Применение условной инструкции if else является наиболее очевидным способом управления видимостью элемента. Но при использовании составных эффектов из библиотеки jQuery мы можем полностью отказаться от него (хотя в данном конкретном примере условная инструкция все равно необходима для реализации изменения текста ссылки). Библиотека jQuery предоставляет метод .toggle(), который действует так же, как методы .show() и .hide(), и, подобно им способен принимать аргумент, определяющий скорость вспроизведения эффекта. В качестве еще одного примера метода воспроизведения составного эффекта можно привести метод .slideToggle(), который отображает или скрывает элементы, постепенно увеличивая или уменьшая их высоту. Ниже показано, как выглядит сценарий, в котором используется метод .slideToggle():
$(document).ready(function() {
var $firstPara = $('p:eq(1)');
$firstPara.hide();
$('a.more').click(function() {
$firstPara.slideToggle('slow');
var $link = $(this);
if ($link.text == "Далее") {
$link.text('Готово');
} else {
$link.text('Далее');
}
return false;
});
});
Рис.2. Использование метода .slideToggle()
Полный текст этого примера можно взять здесь.На этот раз, чтобы избежать повторного использования выражения $(this) и тем самым повысить скорость выполнения и удобочитаемость сценария, мы сохраняем результат этого выражения в переменной $link. Кроме того, условная инструкция проверяет текст ссылки, а не видимость второго параграфа, потому что она используется только для изменения текста.
Со следующего шага мы будем рассматривать создание собственных анимационных эффектов.
