В этой краткой статье я расскажу вам про JQuery метод - animate(). Я приведу примеры простого использования метода и использование метода с изменением нескольких значений css.
При использование метода animate() мы меняем css свойства элемента, в конечном итоге у нас получается простая анимация, на написание которой у нас уйдет минимальное количество времени и строчек кода.
Управление одним свойством css с помощью JQuery метода animate()
Рассмотрим простой пример метода animate(). Сначала напишем структуру html документа, не забудьте подключить к вашему документу библиотеку JQuery, иначе ничего работать не будет. После написания структуры создадим синий квадрат и пропишем сам js код.
Код JQuery мы указываем в теге <script>. Задаем функцию click к нашему квадрату и задаем нашу анимацию $ ( '.box' ). animate ({left: '200px' }), в фигурных скобках мы прописываем css свойство, которое будет выполняться при нажатие левой кнопкой мыши на квадрат.
Если вы все правильно написали, то при нажатие, квадрат должен сместиться влево на 200px.
Как вы видите, код простой, на чистом js у вас бы ушло строчек 10-15, а на JQuery всего 6 строчек.
Управление несколькими свойствами css с помощью JQuery метода animate()
Теперь я продемонстрирую возможность управления несколькими свойствами CSS с jQuery методом animate().
Оставим структуру нашего документа прежней, только поменяем добавим в код JQuery не одно css свойство, а допустим четыре:
В принципе код ничем не поменялся, только в этот раз мы перечисляем несколько свойств css через запятую, в итоге мы меняем смещаем наш квадрат на 200px, делаем из него прямоугольник, изменяя ширину и высоту, а также добавляем ему прозрачность.
На этом заканчивается моя статья, надеюсь вам все было понятно и вы узнали про элементарный метод анимации с помощью библиотеки JS JQuery.
Желаю успехов в программирование, до встречи!
