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

Дата публикации:Февраль 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 не будет опубликован. Обязательные поля помечены *

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