club762.ruМы приступаем к изучению одного из самых интересных и увлекательных разделов. Библиотека 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");
});
...
Большое спасибо автору блога! Много хороших публикаций у Вас в блоге. Добавила в rss теперь буду чаще приходить.