Основы jQuery. Анимация

Аватар пользователя loik1
Не в сети
Последнее посещение: 2 года 17 недель назад
Зарегистрирован: 2014-05-31
Сообщения:
Пожалуй это самая эффектная часть jQuery. С помощью анимации и CSS можно делать очень красивые вещи, которые наверняка понравятся вашим пользователям сайта. Приведу пример простой анимации.

Допустим у нас по умолчанию есть черный квадрат, который находится ровно по середине экрана и кнопка ниже. При нажатии на кнопку, квадрат медленно перемещается в левый верхний угол экрана и превращается при этом в круг. Магия Все очень просто.

#block{ height: 100px; width: 100px; left: 50%; top: 50%; background: #000; } $(function() { var block = $("#block"), button = $("button"); button.on("click", function() { block.animate({ "left":"0%", "top":"0%", "borderRadius":"1000px" }, 1000); }); });

click.

Разбираем код. Вначале мы задаем стили нашему элементу. Высота/ширана 100px, отступ слева и сверху 50%, цвет черный. В обработчике в функции animate происходит вся магия Эта функция принимает 2 параметра. Первый параметр это CSS свойства, которые нужно изменить в процессе анимации. Пишутся в фигурных скобках через запятую. Второй параметр, это собственно время в милисекундах, в течении которого будет происходить изменение CSS свойств. В данном скрипте я указал, что объект должен двигаться к левому верхнему краю экрана, при этом края должны закруглятся до тех пор, пока квадрат не превратиться в круг. И все это должно произойти за одну секунду. Как видите ничего сложного Пожалуй единственный минус анимации, она может работать только со свойствами, которые имеют числовые параметры. Функция может менять ширину, высоту и тп, т.к эти свойства измеряются цифрами, но она не сможет обработать допустим float: left. Возникнет ошибка, и ничего не произойдет.

Аватар пользователя 8fank77
Не в сети
Последнее посещение: 2 года 9 недель назад
Зарегистрирован: 2014-06-30
Сообщения:
Анимация.
Доброго времени суток, уважаемые пользователи данного форума. Автор, я конечно же, пожалуй соглашусь с вами. Потому что это настоящее поле для создания различных творений. Только вот это подойдет к сайтам, которые отвечают по большей части развлекательной тематике. Ведь интереснее увидеть что-нибудь необычное на таком интернет-ресурсе. На официальном же сайте это будет выглядеть не очень. Удачи вам.
Аватар пользователя ingwarua53
Не в сети
Последнее посещение: 2 года 18 недель назад
Зарегистрирован: 2014-06-24
Сообщения:
В большем степени согласен с

В большем степени согласен с автором первого комментария и по сути, и по выкладке темы. Достаточно популярная и многофункциональная анимационная платформа. Но все-таки есть одно но. Это но заключается в том, что для создания площадок на русских просторах интернета данная платформа не очень уж адаптирована.

Аватар пользователя tornado5
Не в сети
Последнее посещение: 16 часов 58 мин. назад
Зарегистрирован: 2014-06-24
Сообщения:
Баллы: 25.80
А я вот не  соглашусь с

А я вот не соглашусь с комментариями. Я, наоборот считаю, что не один современный более-мене крупный сайт уже не может обойтись без анимации. Даже в том случае, если этот сайт посвящен достаточно серьезным темам далеким от тематики развлечений.

Реклама