Голосование
Какую CMS Вы предпочитаете
AtomX
Fapos CMS
Drunya CMS
Топ новостей
- Генератор аватарок в стиле пиксель-арт
- Скачать Fapos CMS 1.1.8 Бесплатно
- Цунами в Японии. Последствия.
- Предварительная инфа о FAPOS 1.1.9. Часть 2
- Описание версии CMS Fapos 0.9.9
- Новая версия Fapos 1.3
- Половина россиян не смогла отличить легальный контент
- Что есть Fapos CMS
- Убийца Apache у вас на пороге
- Открытое тестирование Fapos 0.9.9
Последние комментарии
Топ пользователей
Сайты на AtomX CMS
Думаю, все согласятся, что когда на сайте присутствует анимация, выглядит это сосем иначе, чем резкая смена чего либо. На пример, плавно появляющийся блок или плавное изменение размера контейнера. Анимация создает привлекательные эффекты. По этому, я решил написать немного об этом. Конечно же, анимацию можно делать, используя только стандартные средства JavaScript. Но горазда приятнее и проще делать это, используя фреймворк JQuery. Так что в своих примерах я буду использовать эту библиотеку(или фреймворк, кому как удобнее).
Пример самой простой анимации можно выразить так:
Этот пример демонстрирует плавное "расширение" блока с ID = test. Так же в функции slideDown() можно использовать параметр "скорость"(slow, normal, fast).
Ну, а чтобы вернуть элемент в первоначальное положение, мы используем функцию slideUp() - противоположность slideDown().
Кроме плавного увеличения элемента, есть еще функции fadeIn() и fadeOut(). Это плавное исчезание и появление элементов. В этих функциях, так же как и в slideDown(или slideUp()), можно указывать скорость анимации.
Но самая интересная, на мой взгляд функция - это animate(). Эта функция создает анимацию для изменения текущих значений на новые(речь идет о значениях CSS). На пример:
Стоит обратить внимание, что эта функция работает только с числовыми значениями, такими как ширина, высота, прозрачность и т.д. animate() не может работать с background-color и подобными значениями. Хотя на просторах интернета есть плагины, позволяющие исправить этот недостаток. Пока я показал самые простые примеры, но что если элемент анимируется и в это время происходит событие, инициализирующее новую анимацию того же объекта. В таком случае можно наблюдать не очень приятную картину. По этому я советую анимировать обекты, используя прерывание текущих анимаций, если таковые имеются:
Вызов stop() прерывает выполнение текущих анимаций, прежде чем начать новую. Это довольно полезно.
Так же можно "привязать" анимацию к объекту таким способом
или
Что ж, надеюсь урок был вам полезен. Так же вы можете задавать вопросы на .
Пример самой простой анимации можно выразить так:
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>
Что ж, надеюсь урок был вам полезен. Так же вы можете задавать вопросы на .
Сейчас online: 4. Зарегистрированных: 0. Гостей: 4.
AtomX 2.8 Beta - Новая версия бесплатной CMS
AtomX 2.8 Beta - Новая версия бесплатной CMS
Программирование - что может быть проще.
Программирование - что может быть проще.
AtomX 2.8 Beta - Новая версия бесплатной CMS
AtomX 2.8 Beta - Новая версия бесплатной CMS
Написание простого вируса в блокноте
Что такое API и для чего они нужны
Классы в PHP для чайников
Написание простого вируса в блокноте