Анимация в jQuery. Часть 4. Метод animate

Анимация в jQuery

От автора: приветствую вас, друзья. Итак, мы продолжаем изучение методов jQuery, позволяющих реализовать эффекты анимации. Сегодня мы рассмотрим метод animate, который может анимировать сразу несколько свойств, тем самым позволяя нам создавать пользовательскую анимацию в jQuery.

Итак, мы с вами уже знаем несколько методов, которые позволяют организовать достаточно симпатичные эффекты анимации в jQuery — это методы группы fade и slide, а также простые методы hide и show.

Однако эти методы ограничены в своем действии. Так, методы slide позволяют анимировать высоту элементы, создавая эффект слайдинга. Методы fade работают с непрозрачностью элемента, позволяя создавать эффект растворения. А что если мы хотим анимировать сразу несколько свойств?

В реализации задуманного нам пригодится метод animate, который умеет работать с любыми свойствами, позволяя таким образом создавать пользовательскую анимацию. Синтаксис функции animate отличается от изученных ранее методов. Первым параметром мы должны передать объект свойств и их значений для анимирования. Вторым параметром мы можем передать продолжительность анимации в миллисекундах. Также в функцию можно передавать и другие необязательные параметры, например функцию обратного вызова, но чаще метод animate используется с указанными двумя первыми параметрами.

Давайте попробуем решить следующую задачу. У нас есть картинка, при наведении на которую ее необходимо немного увеличить. Также пусть она будет изначально полупрозрачной, соответственно, при увеличении мы должны изменять и значение непрозрачности. Итак, у нас есть следующая картинка:

<img src="http://lorempixel.com/400/200/city" alt="" id="img1" width="400" height="200" style="opacity: .5;">

Анимация в jQuery

И небольшой код jQuery, добавляющий немного магии:

$(function(){
	$('img').hover(
		function(){
			$(this).animate({
				width: 600,
				height: 300,
				opacity: 1
			}, 500);
		},
		function(){
			$(this).animate({
				width: 400,
				height: 200,
				opacity: .5
			}, 500);
		}
	);
});

В результате при наведении курсора мыши на картинку она будет плавно увеличиваться и становиться непрозрачной. При уводе курсора — картинка вернется в прежнее состояние.

Анимация в jQuery

Давайте пройдемся по написанному коду. Во-первых, мы использовали функцию hover, которая устанавливает обработчик для событий mouseenter и mouseleave, т.е. появления курсора над элементом и выхода курсора с элемента. Соответственно, при появлении курсора на картинке мы выполняем одну функцию, а при выходе — другую.

Внутри каждой из функций мы использовали метод animate, внутри которого и анимируем необходимые нам CSS свойства элемента. Все просто, не так ли? При этом смотрится такой эффект достаточно симпатично. Конечно, данный код достаточно примитивен и не лишен недостатков. Например, картинок может быть много и у каждой могут быть свои размеры, поэтому зашивать размеры в код нецелесообразно, поскольку такой код работает корректно только для одной картинки с указанными размерами. Можете попробовать самостоятельно написать более универсальный код, который будет работать для изображений разных размеров.

Ну а мы на этом остановимся пока. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree