ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Анимация

Анимация
Метод animate()

Метод animate() выполняет заданную анимацию для выбранного элемента.

Метод animate плавно изменяет первоначальное CSS оформление элемента на указанное в параметрах создавая этим эффект анимации.
Для создания анимации могут быть использованы только CSS свойства содержащие численные значения (например такие как font-size или border-width). CSS свойства содержащие строковые значения (такие как color) не могут быть анимированы.

Синтаксис функии:

$(селектор).animate({стили},скорость,функция_смягчения,функция_обратного_вызова)
  1. селектор выбирает элемент, который будет анимирован.
  2. стили (обязательный параметр) Содержит CSS свойства для создания анимационного эффекта. Данный параметр должен содержать DOM имена (представляют собой видоизмененные CSS свойства в которых слова разделенные через тире пишутся слитно и с большой буквы, например background-color превратится в backgroundColor, font-size в fontSize), а не CSS названия свойств.
  3. скорость задает скорость выполнения анимации. Скорость может быть задана в миллисекундах или с помощью одного из предопределенных свойств: slow, fast, normal (медленно, быстро, нормально).
  4. функция_смягчения задает функцию смягчения. Функция смягчения отвечает за плавность выполнения анимации.
  5. функция_обратного_вызова задает функцию, которая будет вызвана, когда анимация будет завершена.

Рассмотрим как работает данная функция на примере.


$(document).ready(function() {
$("#but1").click(function(e) {
$( "#par1" ).animate({
width: "toggle",
opacity: "toggle"
}, {
duration: "slow"
});
});
$("#but2").click(function(e) {
$( "#par1" ).animate({
height: 200,
width: 400,
opacity: 0.5
}, 1000, "linear", function() {
alert( "Все сделано" );
});
});
$("#but3").click(function(){
$("#par1").clearQueue();
$("#par1").stop();
})

$("#but4").click(function(){
$("#par2").animate({fontSize:"1.3em"},1000);
$("#par2").animate({marginLeft:"100px"},1000);
$("#par2").animate({marginTop:"100px"},1000);
$("#par2").queue(function(){
alert("Это окно должно быть отображено после 3-го шага анимации.");
$(this).dequeue();
});
$("#par2").animate({fontSize:"1em"},1000);
$("#par2").animate({marginLeft:"0px"},1000);
$("#par2").animate({marginTop:"0px"},1000);
});
$("#but5").click(function(){
$("#par2").clearQueue();
$("#par2").stop();
})
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Анимация. Метод animate()</title>
<style>
#par1{background:#DF00F7; }
#par2{background:#FF0000; max-width: 150px}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#but1").click(function(e) {
$( "#par1" ).animate({
width: "toggle",
opacity: "toggle"
}, {
duration: "slow"
});
});
$("#but2").click(function(e) {
$( "#par1" ).animate({
height: 200,
width: 400,
opacity: 0.5
}, 1000, "linear", function() {
alert( "Все сделано" );
});
});
$("#but3").click(function(){
$("#par1").clearQueue();
$("#par1").stop();
})

$("#but4").click(function(){
$("#par2").animate({fontSize:"1.3em"},1000);
$("#par2").animate({marginLeft:"100px"},1000);
$("#par2").animate({marginTop:"100px"},1000);
$("#par2").queue(function(){
alert("Это окно должно быть отображено после 3-го шага анимации.");
$(this).dequeue();
});
$("#par2").animate({fontSize:"1em"},1000);
$("#par2").animate({marginLeft:"0px"},1000);
$("#par2").animate({marginTop:"0px"},1000);
});
$("#but5").click(function(){
$("#par2").clearQueue();
$("#par2").stop();
})
});
</script>
</head>

<body>
<input type="button" id="but1" value="Animate par1">
<input type="button" id="but2" value="Animate par1">
<input type="button" id="but3" value="остановить анимацию">
<input type="button" id="but4" value="Animate par2">
<input type="button" id="but5" value="остановить анимацию">
<p id="par1">Убери меня</p>
<p id="par2">Перемести меня</p>
</body>
</html>

В этом примере мы постарались задействовать максимальное количество свойств css, которое только возможно для использования в данном случае. Так, при нажатии на первую кнопку "par1", мы получаем изменение свойств css: ширины и прозрачности за счет метода toggle(), и задали скорость анимации slow (медленная).

Кликая по второй кнопке, мы меняем размеры и прозрачность данного параграфа, задаем скорость анимации и отчитываемся о проделанной работе.

Функция stop()

С помощью третьей кнопки мы пожем в любой момент остановить анимацию. Для этого используется метод stop(). Функция stop() имеет следующий синтаксис:

$(селектор).stop(очистить_очередь,мгновенно_завершить)
  1. селектор указывает элемент, анимация которого будет остановлена.
  2. очистить_очередь (необязательный параметр) Если данный параметр имеет значение true будет прервана вся анимация помещенная в очередь, а не только выполняющаяся в данный момент.
  3. мгновенно_завершить (необязательный параметр) Если данный параметр имеет значение true вся запущенная анимация будет мгновенно завершена.
Функция queue()

Кликая по четвертой кнопке, мы перемещаем параграф по веб-странице в пределах заданных параметров. Здесь мы видим новую функцию queue(), которая позволяет добавлять функции в очередь выбранного элемента. Очередь привязывается к элементу и имеет имя.
Различные эффекты применяемые поочередно (к примеру комбинация .show('slow').slidedown('fast')) и анимация также является очередью с именем "fx", которую jQuery создает автоматически.
Методы: clearQueue, delay, dequeue, stop и queue в основном используются для управления стандартной очередью fx.
С помощью комбинации методов queue и dequeue Вы можете вставлять произвольные функции или группы функций в очередь.
Метод queue открывает блок, в котором будет задаваться вставляемая функция, а dequeue закрывает его.
Обратите внимание: если после queue не будет вызвано dequeue следующая функция в очереди не будет выполнена. Имеет следующий синтаксис:

$(селектор).queue(имя_очереди,функция)
  1. селектор указывает элемент, в очередь которого будет добавлен код.
  2. имя_очереди (необязательный параметр) Строка содержащая имя очереди. Если данный параметр отсутствует будет использовано "fx".
  3. функция функция добавляемая в очередь.
Функция dequeue()

Эта функция вызывает следующую функцию в очереди выбранного элемента. Имеет следующий синтаксис:

$(селектор).dequeue(имя_очереди)
  1. селектор указывает элемент, к которому привязана очередь функций.
  2. имя_очереди (необязательный параметр) Строка содержащая имя очереди. Если данный параметр отсутствует будет использовано "fx".

И в завершении темы еще один пример испольпользования анимации.


$(document).ready(function() {
$( "#but1" ).click(function() {
$( "#bl1" )
.animate({
width: "90%"
}, {
queue: false,
duration: 3000
})
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});

$( "#but2" ).click(function() {
$( "#bl2" )
.animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});

$( "#but3" ).click(function() {
$( "#but1" ).add( "#but2" ).click();
});

$( "#but4" ).click(function() {
$( "#bl1, #bl2" ).css({
width: "",
fontSize: "",
borderWidth: ""
});
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Добавление содержимого на страницу. Функция .html()</title>
<style type="text/css">
#form div {display:block; margin:25px 10px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
alert($("p.foo").html());
});
</script>
</head>

<body>
<div id="pin">Кликни меня</div>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br>
<input name="name" type="text" /><br>
<label for="password">Пароль</label><br>
<input name="password" type="password" /><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br><br>
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>

</div>
</body>
</html>