Выполнение пользовательской анимации
Материал из JQuery
Выполняет заданную пользователем анимацию, с выбранными элементами. Анимация происходит за счет плавного изменения 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:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button id="go">» Съешь пирожок</button>
<div id="block">Алиса</div>
<script>
// Произведем изменение нескольких 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 секунды
});
</script>
</body>
</html>
