Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по JQuery / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Easing – эффекты для анимации

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

Попробуем разобраться на примерах. Создадим обычный блок div и будем изменять его ширину и высоту.

<div id="block"></div>

Подключим скрипты и пропишем немного стилей:

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script
type="text/javascript" src="jquery.easing.1.3.js"></script>
<style>

body{
  padding:40px;
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
  font-size:12px;
}
#block{
  width:200px;
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  margin:-100px 0 0 -100px;
  background:#333;
  border-radius:8px;
}
</style>

Вот так вот анимация выглядит без эффектов

$('#block').animate({width: '300px', height: '300px'}, 1500);

С эффектом вот так, который просто указывается третьим параметром в функции:

$('#block').animate({width: '300px', height: '300px'}, 1500, 'easeInOutCubic');

Шпаргалку по эффектам, а так же их визуальное представление можно посмотреть на сайте http://easings.net/ru

Некоторые из них можно осуществить с помощью CSS3. Готовый код так же приведен на сайте.

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

Автор: Евгений Бочкарев Урок добавлен: 05 Марта 2013 в 19:46 Просмотров: 9438

Условия копирования материалов сайта

Все комментарии
#-8 Олег 06-03-2013 в 23:12
Хорошая статья про javascript анимацию=) Просто блеск! А можно больше про это? ОЧень интересно! к примеру как сделать загибающийся уголок сайта!?
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки