Добавление различных эффектов

Мы приступаем к изучению одного из самых интересных и увлекательных разделов. Библиотека 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");
  });
...