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 могут значительно облагородить появление какого-то объекта на странице.