Закрыть
Войти
Подождите...
Собирается информация...
Восстановить пароль
Логин или пароль введены не верно!
Подождите...
Идет авторизация.
Вход
Логин или пароль введены не верно!
Забыли пароль?
или войти через вконтакте

Анимация

Открыть содержание
JavaScript

Теперь, мы будем учиться анимировать объекты и производить с ними некоторые действия.

Не будем долго размусоливать и начнем перечислять: 

1) show(), hide()

Самое простое, что мы можем сделать, это показать или скрыть объект. По факту мы управляем css-свойством display, которое принимает либо значение none, либо block.

$('.object').show(); //Показать объект
$('.object').hide(); //Скрыть объект

2) slideDown(), slideUp()

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

$('.object').slideDown(); //Показать объект
$('.object').slideUp(); //Скрыть объект

3) fadeIn(), fadeOut()

Эти методы позволят плавно скрыть или показать. То есть просто плавно изменяется прозрачность от 0 к 1 и наоборот. 

$('.object').fadeIn(); //Показать объект
$('.object').fadeOut(); //Скрыть объект

Для методов slideDown, slideUp, fadeIn, fadeOut в круглых скобках вы можете указать время, течение какого должна происходить анимация. Время указывается в мс (миллисекундах).

$('.object').fadeOut(1000); //Объект будет скрываться в течение секунды

4) animation()

Метод позволяет плавно изменять css-свойства. Вы задаете на сколько или в какую сторону и течение какого времени изменить свойство. 

$('.object').animation({'css-свойство','значение'},time);

time указывается в миллисекундах. Вообще все указывается, как правило, в миллисекундах) Миллисекунда - это 1/1000 секунды. То есть 1c = 1000мс.

При чем, можно написать не просто значение, к которому нужно придти, а написать в значении "+=100px" и тогда к текущему значению, прибавится 100px. В некоторых ситуациях, очень полезная штука. 

Но! Есть еще два способа как можно анимировать не используя этот метод, которые, на мой взгляд, будут круче и удобней. 

а) Менять css-свойства с помощью метода css(). 

Задаете для блока, у которого хотите что-то изменить свойство transition и указываете время. Например, секунду: 

.object{
  width:200px;
  transition: 1s;
}

И меняете необходимое свойство js-кой. 

$('.object').css('width','400px');

И ширина плавно в течение 1 секунды перекочует от 200px до 400px. 

б) Идея та же самая, но реализация другая.

Делаем два класса с двумя состояниями. 

.object{
  width:200px;
  transition: 1s;
}
.object_big_width{
  width: 400px;
}
<div class='object'></div>

При чем, класс object_big_width мы не указываем для тега. 

А потом, в нужный момент в js-ке, добавляем нашему блоку новый класс. 

$('.object').addClass('object_big_width');

Этот способ, мне кажется, лаконичнее, удобней по отслеживанию ошибок и изменению свойств, в случае перемен. 


Вот такой простой набор правил мы с вами разобрали. Эти свойства очень простые, но порой те же slideDown и slideUp могут значительно облагородить появление какого-то объекта на странице. 

Предыдущий урок Следующий урок
Политика конфиденциальности   Пользовательское соглашение