Введение в эффекты

Введение

Добро пожаловать в документацию по jQuery! В этом практическом занятии вы познакомитесь с эффектами.

jQuery позволяет легко добавлять простые эффекты на вашу страницу. Эффекты могут использовать встроенные настройки или задаваться пользовательской длительностью. Также можно создавать произвольные анимации CSS-свойств.

Skills Graph

Показ и скрытие содержимого

В ВМ уже предоставлен index.html.

jQuery может мгновенно показывать или скрывать содержимое с помощью .show() или .hide():

// мгновенно скрыть все абзацы
$("p").hide();

// мгновенно показать все div, у которых есть класс hidden
$("div.hidden").show();

Когда jQuery скрывает элемент, оно устанавливает его CSS-свойство display в значение none. Это означает, что содержимое будет иметь ширину и высоту равные нулю; это не означает, что содержимое просто станет прозрачным и оставит пустое место на странице.

jQuery также может показывать или скрывать содержимое с помощью анимационных эффектов. Вы можете указать .show() и .hide() использовать анимацию несколькими способами. Один из них - передать аргумент 'slow', 'normal' или 'fast':

// медленно скрыть все абзацы
$("p").hide("slow");

// быстро показать все div, у которых есть класс hidden
$("div.hidden").show("fast");

Если вы предпочитаете более прямое управление длительностью анимационного эффекта, вы можете передать желаемую длительность в миллисекундах в .show() и .hide():

// скрыть все абзацы за полсекунды
$("p").hide(2000);

// показать все div, у которых есть класс hidden, за 1,25 секунды
$("div.hidden").show(1250);

Большинство разработчиков передают количество миллисекунд, чтобы иметь более точный контроль над длительностью.

Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Изменение отображения в зависимости от текущего состояния видимости

jQuery также позволяет изменять видимость содержимого в зависимости от его текущего состояния видимости. .toggle() покажет содержимое, которое в настоящее время скрыто, и скрывает содержимое, которое в настоящее время видимое. Вы можете передавать те же аргументы в .toggle(), что и в любые из методов эффектов выше.

// мгновенно переключить отображение всех абзацев
$("p").toggle();

// переключить отображение всех div за 1,8 секунды
$("div").toggle(1800);

.toggle() будет использовать комбинацию эффектов слайда и затухания, так же, как это делает .show() и .hide().

Вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Что произойдет после завершения анимации

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

$("div.hidden").fadeIn(1500).addClass("lookAtMe");

Важно понимать, что .fadeIn() выше только запускает анимацию. Как только анимация запущена, ее выполнение происходит за счет быстрого изменения CSS-свойств в цикле setInterval() на JavaScript. Когда вы вызываете .fadeIn(), он запускает цикл анимации и затем возвращает jQuery-объект, передавая его дальше в .addClass(), которое в свою очередь добавит стильный класс lookAtMe, пока цикл анимации только начинается.

Чтобы отложить действие до завершения анимации, вам нужно использовать функцию обратного вызова для анимации. Вы можете указать функцию обратного вызова для анимации в качестве второго аргумента, передаваемого любому из методов анимации, обсуждаемых выше. Для кода выше мы можем реализовать обратный вызов следующим образом:

// Плавно показать все скрытые абзацы; затем добавить к ним стильный класс (правильно с использованием функции обратного вызова для анимации)
$("div.hidden").fadeIn(1500, function () {
  // this = DOM-элемент, который только что завершил анимацию
  $(this).addClass("lookAtMe");
});

Обратите внимание, что вы можете использовать ключевое слово this для ссылки на DOM-элемент, который анимируется. Также обратите внимание, что функция обратного вызова будет вызываться для каждого элемента в jQuery-объекте. Это означает, что если ваш селектор не возвращает элементов, функция обратного вызова для анимации никогда не будет выполнена! Вы можете решить эту проблему, проверив, вернул ли ваш выбор какие-либо элементы; если нет, вы можете просто сразу выполнить функцию обратного вызова.

// Выполнить функцию обратного вызова, даже если не было элементов для анимации
var someElement = $("#nonexistent");

var cb = function () {
  console.log("готово!");
};

if (someElement.length) {
  someElement.fadeIn(300, cb);
} else {
  cb();
}

Вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по введению в эффекты. Чтобы узнать больше о jQuery API, пожалуйста, ознакомьтесь с официальной документацией по jQuery.