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

Дата публикации:Февраль 22, 2011

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

Один комментарий

  1. Большое спасибо автору блога! Много хороших публикаций у Вас в блоге. Добавила в rss теперь буду чаще приходить.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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