Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Голосование

    Какую CMS Вы предпочитаете

    AtomX
    Fapos CMS
    Drunya CMS
Последние комментарии
Автор: чайник, в новости:

Что такое API и для чего они нужны

Автор: HIshnik, в новости:

Классы в PHP для чайников

Автор: Аноним, в новости:

Написание простого вируса в блокноте

Автор: stream, в новости:

Создаем BB коды на PHP

Автор: boriska, в новости:

Релиз Atom-M CMS 4

Автор: 0leg, в новости:

Релиз Atom-M CMS 4

Топ пользователей
Drunya
Репутация: 108
Сообщений: 3531
Сашка_из_Шебекино
Репутация: 87
Сообщений: 1803
boriska
Репутация: 65
Сообщений: 846
ARMI
Репутация: 46
Сообщений: 1859
BAH0
Репутация: 26
Сообщений: 544
Думаю, все согласятся, что когда на сайте присутствует анимация, выглядит это сосем иначе, чем резкая смена чего либо. На пример, плавно появляющийся блок или плавное изменение размера контейнера. Анимация создает привлекательные эффекты. По этому, я решил написать немного об этом. Конечно же, анимацию можно делать, используя только стандартные средства JavaScript. Но горазда приятнее и проще делать это, используя фреймворк JQuery. Так что в своих примерах я буду использовать эту библиотеку(или фреймворк, кому как удобнее).

Пример самой простой анимации можно выразить так:
1
$('#test').slideDown();

Этот пример демонстрирует плавное "расширение" блока с ID = test. Так же в функции slideDown() можно использовать параметр "скорость"(slow, normal, fast).
1
$('#test').slideDown('fast');

Ну, а чтобы вернуть элемент в первоначальное положение, мы используем функцию slideUp() - противоположность slideDown().
1
$('#test').slideUp('fast');


Кроме плавного увеличения элемента, есть еще функции fadeIn() и fadeOut(). Это плавное исчезание и появление элементов. В этих функциях, так же как и в slideDown(или slideUp()), можно указывать скорость анимации.

Но самая интересная, на мой взгляд функция - это animate(). Эта функция создает анимацию для изменения текущих значений на новые(речь идет о значениях CSS). На пример:
1
2
3
4
$('#test').animate({
        'height' => '400px',
        'width' => '1000px'
}, slow);

Стоит обратить внимание, что эта функция работает только с числовыми значениями, такими как ширина, высота, прозрачность и т.д. animate() не может работать с background-color и подобными значениями. Хотя на просторах интернета есть плагины, позволяющие исправить этот недостаток. Пока я показал самые простые примеры, но что если элемент анимируется и в это время происходит событие, инициализирующее новую анимацию того же объекта. В таком случае можно наблюдать не очень приятную картину. По этому я советую анимировать обекты, используя прерывание текущих анимаций, если таковые имеются:
1
2
3
4
$('#test').stop().animate({
        height: '400px',
        width: '1000px'
}, slow);

Вызов stop() прерывает выполнение текущих анимаций, прежде чем начать новую. Это довольно полезно.

Так же можно "привязать" анимацию к объекту таким способом
1
<div onMouseOver="$(this).stop().animate({height: '400px', width: '1000px'});"></div>

или
1
2
3
4
5
6
7
8
<script type="text/javascript">
$(document).ready(function(){
        $('#test').click(function(){
                $(this).stop().animate({height: '400px', width: '1000px'});
        });
});
</script>
<div id="test"></div>

Что ж, надеюсь урок был вам полезен. Так же вы можете задавать вопросы на форуме.
Анимация в JavaScript (JQuery)

Теги: Анимация JQuery JavaScript;
Автор: Drunya
Категория: JavaScript
Просмотров: 4358
Комментариев: 0

Сейчас online: 6. Зарегистрированных: 0. Гостей: 6.
-->