Методы создания анимации

Практически все методы, которые мы рассматривали в двух предыдущих разделах, используют метод animate (). Этот метод позволяет создавать произвольную анимацию за счет изменения числовых атрибутов (например, height, width, opacity и др.).
Метод animate () имеет два формата.


animate (< Изменяемые а трибуты>, < Опциu>)
animate {<Изменяемые атрибуты>[, <Продолжительность>[, <Эффект> [, <Функция обратного вызова>]]])

В первом параметре атрибуты и значения должны быть указаны следующим образом.
{
Атрибут1: "Значение1", Атрибут2: "Значение2",
Атрибуты: "ЗначениеN"
}
Если название атрибута содержит дефис, то такое название необходимо указывать в стиле JavaScript (например, fontSize вместо font-size). В качестве значения могут быть указаны:

• число с абсолютными единицами измерения (например, рх, in и др.);
• число с относительными единицами измерения % и em;
• hide, show или toggle.

Можно также определять значения атрибута относительно его текущей позиции, указав перед значением += или -=

Листинг 7.2. Перемещение элементов
<html>
<head>
<title>Перемещение элементов</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#btn1").click(function() {
$("#div1").animate({ left: "-=" + $("#txt1").val()},
1000);
});
$("#btn2").click(function() {
$("#div1").animate({ left: "+=" + $("#txt1").val()},
1000);
});
$("#btn3").click(function() {
$("#div1").animate({ top: "-=" + $("#txt1").val()},
1000);
});
$("#btn4").click(function() {
$("#div1").animate({ top: "+=" + $("#txt1").val()},
1000);
});
});
//-->
</script>
<style>
.cls1 {
position:absolute;
top:50px;
left:10px;
width:100px;
height:100px;
background-color:black;
}
</style>
</head>
<body>
<input type="text" value="50px" id="txt1">
<input type="button" value="Влево" id="btn1">
<input type="button" value="Вправо" id="btn2">
<input type="button" value="Вверх" id="btn3">
<input type="button" value="Вниз" id="btn4"><br>
<div id="div1" class="cls1"><div>
</body>
</html>
В параметре <Продолжительность> может быть указано время выполнения анимации в миллисекундах или следующие значения:

• fast — 200 миллисекунд;
• normal — 400 миллисекунд;
• slow — 600 миллисекунд.

В качестве примера рассмотрим изменение ширины элементов

Листинг 7.3. Изменение ширины элементов
<html>
<head>
<title>Изменение ширины элементов</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#btn1").click(function() {
$("#div1").animate({ width: "hide" }, 300);
});
$("#btn2").click(function() {
$("#div1").animate({ width: "show" }, 300);
});
$("#btn3").click(function() {
$("#div1").animate({ width: "toggle" }, "slow");
});
});
//-->
</script>
<style>
.cls1 {
position:absolute;
top:50px;
left:10px;
width:150px;
height:100px;
background-color:black;
}
</style>
</head>
<body>
<input type="button" value="Скрыть" id="btn1">
<input type="button" value="Отобразить" id="btn2">
<input type="button" value="Скрыть/Отобразить" id="btn3"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

Если щелкнуть на кнопке Скрыть, то элемент свернется справа налево, а если затем щелкнуть на кнопке Отобразить, то он раскроется слева направо. Щелчок на кнопке Скрыть/Отобразить позволяет свернуть элемент (если он развернут) или развернуть (если он свернут).
В параметре <Эффект> могут быть указаны эффекты замедления из дополнительных модулей или два значения:

• swing — в начале идет ускорение, а в конце замедление (значение по умолчанию);
• linear — равномерная скорость движения.

В необязательном параметре «Функция обратного вызова> может быть указана ссылка на функцию, которая будет вызвана после окончания анимации. Внутри функции обратного вызова доступен указатель (this) на текущий DOM-элемент. Формат функции:
function <Название функции> () {
// ...
}

В параметре <Опциu> значения должны быть указаны следующим образом.
{
0пция1: "Значение1",
0пция2: "Значение2",
ОпцияN: "ЗначениеN"
}

Могут быть указаны следующие опции:

• duration— время выполнения анимации в миллисекундах или значения fast,
normal и slow;

• easing— эффект замедления из дополнительных модулей или значения swing
и linear;

• complete — ссылка на функцию, которая будет вызвана после окончания ани
мации;

• queue— если указано значение false, то текущая анимация будет выполнена
параллельно с последующими анимациями. Если указано значение true
(значение по умолчанию), то анимации, заданные для одного и того же элемента,
выполняются последовательно

Листинг 7.4. Параллельное и последовательное выполнение анимации
<html>
<head>
<title>Параллельное и последовательное выполнение
анимации</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#btn1").click(function() {
$("#div1")
.css({ width: "100px", height: "20px", fontSize: "10px"
})
.animate({ width: "450px", height: "100px" },
{ queue: false, duration: 2000 })
.animate({ fontSize: "32px" }, 2000);
});
$("#btn2").click(function() {
$("#div1")
.css({ width: "100px", height: "20px", fontSize: "10px"
})
.animate({ width: "450px", height: "100px" },
{ duration: 2000 })
.animate({ fontSize: "32px" }, 2000);
});
});
//-->
</script>
<style>
.cls1 {
position:absolute;
top:50px;
left:10px;
width:100px;
height:20px;
background-color:white;
border:black thin dotted;
font-size:10px;
}
</style>
</head>
<body>
<input type="button" value="queue:false" id="btn1">
<input type="button" value="queue:true" id="btn2"><br>
<div id="div1" class="cls1">Текст<div>
</body>
</html>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *