[Функция] animate(params, duration, easing, callback)
Раздел "Effects"
Функция предназначена для создания пользовательской анимации.
animate(params, duration, easing, callback)
1.0
params: набор стилевых атрибутов, которые вам необходимо анимировать.
duration: строка представленная одним из трёх предопределенных параметров скорости (speed) ("slow", "normal", or "fast") или количеством миллисекунд выполнения анимации (например, 1000)
easing: имя используемого эффекта, который вам необходимо использовать (рекомендуется использовать дополнение). Есть два предопределенных метода , "linear" и "swing"
callback: выполняемая функция, когда анимация будет завершена, выполняется один раз для каждого анимируемого элемента
function callback(eventObject) {
this; // элемент
}
Ключевой аспект данной функции – объект стилевых свойств, который будет анимирован. Каждый ключ внутри представляет свойство стиля, которое будет анимировано (например: "height", "top", or "opacity"). Учтите, что свойства должны быть обозначены без пробелов, последующее слово с большой буквы, т.е. "marginLeft" вместо "margin-left." Переменная, связанная со свойством представляет тот результат свойства, который будет анимирован. Если значение свойства стиля заданно определенным значением, свойство стиля затем переходит из текущего его значения в новое значение. Функция ведёт себя по-другому, если свойство представлено как "hide", "show", или "toggle", анимация будет создана по заданному значению. Поддерживаются только те свойства, переменные которых носят числовой характер (т.е. свойство backgroundColor не поддерживается).
Начиная с jQuery 1.2 вы можете анимировать свойства, представленные в em и % (для соответствующих свойств). Дополнительно, в jQuery 1.2, вы можете использовать относительную анимацию – обозначаемую как += ил -= перед значением свойства, передвигая элемент, позициируя его положительно или отрицательно относительно его текущей поиции.
Начиная с jQuery 1.3 если вы указываете параметр функции duration как 0 анимация будет синхронно устанавливаться для элемента (это отличие от ранних версий где данное свойство было коротким, не синхронизованным, замедленным перед устанавливаемым окончанием того или иного стиля).
Пример:
Нажмите кнопку button чтобы анимировать элемент div с различным числом свойств.
"jQuery"
// Using multiple unit types within one animation.
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
"HTML"
<button id="go">Запуск анимации</button>
<div id="block">Привет!</div>
"CSS"
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Using multiple unit types within one animation.
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
});
</script>
</head>
<body class="iframe">
<button id="go">Запуск анимации</button>
<div id="block">Привет!</div>
</body>
</html>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
Пример:
Показать элемент div с относительм движением. Нажимайте определенное время по кнопкам, просматривая относительную анимации, поставленную в очередь.
"jQuery"
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
"HTML"
<button id="left"></button> <button id="right"></button>
<div class="block"></div>
"CSS"
div {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
});
</script>
</head>
<body class="iframe">
<button id="left"></button> <button id="right"></button>
<div class="block"></div>
</body>
</html>
<style>
div {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
</style>
Пример:
Анимировать все параграфы переключая высоту (height) и прозрачность (opacity), выполнение анимации займёт 600 мс.
Пример:
Анимировать все пеараграфы, установив левый отступ 50 и свойство opacity 1 (непрозрачным, видимым), анимация выполняется в течении 500 миллисекунд.
Пример:
Пример использования параметра функции easing, обеспечивающего различный стиль анимации. Пример будет работать, если вы подключили соответствующее дополнение, обеспечивающее данную анимацию. Учтите, данный код ничего не будет делать пока элемент скрыт (hidden).
"jQuery"
$("p").animate({
"opacity": "show"
}, "slow", "easein");
Метод появился в jQuery 1.0 (
animate(params, duration, easing, callback)<offpage>http://api.jquery.com/animate/<offpage>)
Версия jQuery 1.4.2
Документ создан 2010-08-21
