Анімація на jquery

Відео: Уроки jQuery # 5 | Анімація. частина 1.Hide.Show.SlideUp.SlideDown

jQuery дозволяє легко робити динамічні сайти, багато в чому, це завдяки відмінному механізму створення анімації. Якщо робити подібні речі на чистому jаvascript, то можуть піти сотні рядків коду, тоді як аналогічне дію на jQuery буде написано на кількох рядках коду. Тому в цій статті ми розглянемо процес створення анімації на jQuery.

Почнемо ми з самого простого - використання найпростіших функцій в jQuery, службовців для стандартної анімації:

id="Block"style="background-color:# Ccc- height: 200px; width: 200px;"gt;блок 
id="Fade_out"gt;Приховати блок (через зміну прозорості) 
/ Gt; 
id="Fade_in"gt;Показати блок (через зміну прозорості) 
/ Gt; 
id="Hide"gt;приховати блок 
/ Gt; 
id="Show"gt;Показати блок 
/ Gt; 
id="Slide_up"gt;Приховати блок (через зміну висоти) 
/ Gt; 
id="Slide_down"gt;Показати блок (через зміну висоти)

Код дуже прозорий, і більшість анімацій, зроблених на jQuery, які Ви бачите на сайтах, створено за допомогою цих вже вбудованих функцій.

Однак, jQuery дозволяє створювати і призначену для користувача анімацію:

id="Block"style="background-color:# Ccc- height: 200px; width: 200px;"gt;блок 
id="Start"gt;запустити анімацію

Функція animate () в jQuery запускає анімацію з заданими параметрами. 1-м параметром йдуть всі стильові зміни. По суті, ми тут вказуємо кінцевий стан елемента. Другий параметр є необов`язковим і вказує тривалість анімації. І третій параметр - це функція, яка буде викликана відразу після завершення анімації. Даний параметр так само є необов`язковим.

Відео: Відеокурс JQuery. Урок 6. Створення анімації в jQuery

Мабуть, це все, що потрібно знати для створення анімації на своїх сайтах за допомогою jQuery. Як бачите, бібліотека jQuery дозволяє все це робити надзвичайно просто.

Поділися в соціальних мережах:

Схожі