Выполнение пользовательской анимации
Выполняет заданную пользователем анимацию, с выбранными элементами. Анимация происходит за счет плавного изменения CSS-свойств у элементов. Функция имеет два варианта использования:
properties — список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)
duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд).
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание ниже)
callback — функция, которая будет вызвана после завершения анимации.
properties — список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)
options — дополнительные опции. Должны быть представлены объектом, в формате опция:значение. Варианты опций:
- duration — продолжительность выполнения анимации (см. выше).
- easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускориться). (см. описание ниже)
- complete — функция, которая будет вызвана после завершения анимации.
- step — функция, которая будет вызвана после каждого шага анимации.
- queue — булево значение, указывающее, следует ли помещать текущую анимацию в очередь функций. В случае false, анимация будет запущена сразу же, не вставая в очередь.
- specialEasing — позволяет установить разные значения easing, для разных CSS-параметров. Задается объектом, в формате параметр:значение. Опция была добавлена в jQuery 1.4.
Содержание |
Выполнение нескольких анимаций
При одновременном вызове нескольких эффектов, применительно к одному элементу, их выполнение будет происходить не одновременно, а поочередно. Например при выполнении следующих команд:
$("#my-div").animate({height: "hide"}, 1000); $("#my-div").animate({height: "show"}, 1000);
элемент с идентификатором my-div, в начале будет плавно исчезать с экрана, а затем начнет плавно появляться вновь. Однако, анимации, заданные на разных элементах, будут выполняться одновременно:
$("#my-div-1").animate({height: "hide"}, 1000); $("#my-div-2").animate({height: "show"}, 1000);
Параметр properties
Задается объектом, в формате css-свойство:значение. Это очень похоже на задание группы параметров в методе .css(), однако, properties имеет более широкий диапазон типов значений. Они могут быть заданы не только в виде привычных единиц: чисел, пикселей, процентов и др., но еще и относительно: {height:"+=30", left:"-=40"} (увеличит высоту на 30 пикселей и сместит вправо на 40). Кроме того, можно задавать значения "hide", "show", "toggle", которые скроют, покажут или изменят видимость элемента на противоположную, за счет параметра, к которому они применены. Например
$('div').animate( { opacity: "hide", height: "hide" }, 5000);
Скроет div-элементы, за счет уменьшения прозрачности и уменьшения высоты (сворачиванием) элемента.
Замечание 1: Отметим, что в параметре properties можно указывать только те css-свойства, которые задаются с помощью числовых значений. Например, свойство background-color использовать не следует.
Замечание 2: Величины, которые в css пишутся с использованием дефиса, должны быть указаны без него (не margin-left, а marginLeft).
Обработчик завершения анимации
Функция, заданная в качестве обработчика завершения анимации не получает параметров, однако, внутри функции, переменная this будет содержать DOM-объект анимируемого элемента. Если таких элементов несколько, то обработчик будет вызван отдельно, для каждого элемента.
Параметр easing
Этот параметр определяет динамику выполнения анимации — будет ли она проходить с замедлением, ускорением, равномерно или как то еще. Параметр easing задают с помощью функции. В стандартном jQuery доступны лишь две такие функции: 'linear' и 'swing' (для равномерной анимации и анимации с ускорением). По умолчанию, easing равняется 'swing'. Другие варианты можно найти в плагинах, например, jQuery UI предоставляет более 30 новых динамик.
Существует возможность задавать разные значения easing для разных css-свойств, при выполнении одной анимации. Для этого нужно воспользоваться вторым вариантом функции animate() и задать опцию specialEasing. Например:
$('#clickme').click(function() { $('#book').animate({ opacity: 'toggle', height: 'toggle' }, { duration: 5000, specialEasing: { opacity: 'linear', height: 'swing' } }); });
в этом случае изменение прозрачности будет происходить равномерно (linear), а высота будет изменяться с разгоном в начале и небольшим торможением в конце (swing).
В действии
При нажатии на кнопку, произведем некоторые манипуляции с элементом, используя метод animate:
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~style~gt~ div { background-color:#bca; width:100px; border:1px solid green; } ~lt~/style~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~button id="go"~gt~» Съешь пирожок~lt~/button~gt~ ~lt~div id="block"~gt~Алиса~lt~/div~gt~ ~lt~script~gt~ // Произведем изменение нескольких css-величин в ходе одной анимации. $("#go").click(function(){ $("#block").animate({ width: "70%", // ширина станет 70% opacity: 0.4, // прозрачность будет 40% marginLeft: "0.6in", // отступ от левого края элемента станет равным 6 дюймам fontSize: "3em", // размер шрифта увеличится в 3 раза borderWidth: "10px" // толщина рамки станет 10 пикселей }, 1500); // анимация будет происходить 1,5 секунды }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~