Мы приступаем к изучению одного из самых интересных и увлекательных разделов. Библиотека jQuery включает в себя функции, ответственные за добавление различных визуальных эффектов: плавного появления и исчезновения, скольжения и перемещения элементов. Большинству из вас будет достаточно стандартных шорткатов jQuery, отвечающих за анимацию, однако мы также рассмотрим и функцию animate, позволяющую добиться индивидуальной визуализации сайта.
Основная масса представленных функций позволяет задать в качестве своего аргумента функцию обратного вызова (callback), которая дает возможность легко и быстро инициировать некоторую функциональность после выполнения анимации.
Скрытие и отображение элементов
| .show(speed-optional, functionName) | jQuery(“.post”) .css(“background”, “#f60”).show(“slow”); | Отвечает за отображение выбранных элементов. Если установлена скорость (первый параметр), объект увеличивается слева направо, изменяя свою альфа-прозрачность с 0 до 1. После полного появления может быть вызвана функция. Скорость приводится в миллисекундах, либо указывается как “slow” (медленная) или “fast” (быстрая). |
| .hide(speed-optional, functionName) | jQuery(“.post”) .css(“background”, “#f60”).hide(200); | Отвечает за скрытие выбранных элементов. Если установлена скорость (первый параметр), объект убывает справа налево, изменяя свою альфа-прозрачность с 1 до 0. После полного исчезновения может быть вызвана функция. Скорость приводится в миллисекундах, либо указывается как “slow” (медленная) или “fast” (быстрая). |
“Скольжение” элементов
| .slideUp(speed, functionName) | jQuery(“.post”) .slideUp(‘slow’, function() { // code }); |
Изменяет высоту выбранных элементов до тех пор, пока они не будут скрыты. Скорость приводится в миллисекундах, либо указывается как “slow” (медленная) или “fast” (быстрая). Как только анимация закончит свою работу, будет вызвана функция обратного вызова. |
| .slideDown(speed, functionName) | jQuery(“.post”) .slideDown(‘slow’, function() { // code }); |
Изменяет высоту выбранных элементов до тех пор, пока они не будут раскрыты до полного размера. Скорость приводится в миллисекундах, либо указывается как “slow” (медленная) или “fast” (быстрая). Как только анимация закончит свою работу, будет вызвана функция обратного вызова. |
| .slideToggle() | jQuery(“.post”) .slideToggle(‘slow’, function() { // code }); |
Переключает видимость выбранного элемента, используя эффект “скольжения”. Скорость приводится в миллисекундах, либо указывается как “slow” (медленная) или “fast” (быстрая). Как только анимация закончит свою работу, будет вызвана функция обратного вызова. |
Постепенное появление и исчезновение
| .fadeOut(speed, functionName) | jQuery(“.post”) .fadeOut(“slow”, function(){//code}); | Постепенное исчезновение выбранных элементов путем изменения их альфа-прозрачности от 1 до 0. Изменяет значение CSS свойства display на “none”. |
| .fadeIn(speed, functionName) | jQuery(“.post”) .fadeIn(“slow”, function(){//code}); | Постепенное появление выбранных элементов путем изменения их альфа-прозрачности от 0 до 1. |
| .fadeTo(speed, alpha, functionName) | jQuery(“.post”) .fadeTo(“slow”, .3, function(){//code}); | Постепенное изменение прозрачности выбранных элементов до указанной величины альфа-прозрачности alpha. |
Работа с функцией animate
Три функции, которые приведены в предыдущей таблице, идеально подойдут для реализации наиболее распространенных действий. Несмотря на это, иногда можно столкнуться с такой ситуацией, когда вам понадобится создать уникальный эффект. Для этих целей в jQuery существует функция animate.
| .animate(css properties, duration, easing, functionName) | jQuery(“.post”) .animate({width: 200, opacity: .25}, 1000, function(){//code}); | Задает произвольное изменение CSS свойств для выбранных элементов с целью создания уникальной анимации. |
| .stop() | jQuery(“.post”).stop(); | Останавливает анимацию для выбранных элементов. |
Ниже приведен пример задания произвольной анимации для изображений img, расположенных в записях:
...
jQuery(".post img").animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'}, 1000, function() {
//alert("animate function finished");
});
...