Анімація в jQuery. Частина 2

33

Від автора: вітаю вас, друзі. Отже, ми продовжуємо вивчення методів jQuery, що дозволяють реалізувати ефекти анімації. Сьогодні ми розглянемо декілька методів slide, а саме: slideUp, slideDown і slideToggle, що працюють з висотою елемента.

Отже, перші два методи сімейства slide, керуючі висотою елемента. Метод slideUp – дозволяє згорнути елемент, тобто зробити його висоту нульовий, за досягнення якої елементу встановлюється властивість display: none. Другий метод – slideDown, навпаки, розгортає елемент до колишньої висоти. Наведемо найпростіший приклад:

Згорнути
Розгорнути

Panel heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod

Анимация в jQuery

У нас є пара кнопок, одна з яких буде згортати блок, а друга розгортати. А тепер пара рядків на jQuery для реалізації магії:

$(function(){
$(‘#hide’).click(function(){
$(‘.panel-body’).slideUp();
});
$(‘#show’).click(function(){
$(‘.panel-body’).slideDown();
});
});

От і все. Тепер клік по тій чи іншій кнопці призведе до заявленого дії. Як і для методів hide / show, для методів slide можна передавати ті ж параметри: тривалість анімації і функцію зворотного виклику.

Замість двох кнопок ми можемо використовувати одну, яка буде згортати елемент, якщо він розгорнуто, і розгортати, якщо він згорнутий. Тут нам знадобиться інший метод – slideToggle, який об’єднує в собі два попередніх методу сімейства slide. приберемо обидві кнопки і замінимо їх одній:

Згорнути / Розгорнути

Анимация в jQuery

Відповідно, код jQuery також стане коротшим на один метод:

$(function(){
$(‘#btn’).click(function(){
$(‘.panel-body’).slideToggle();
});
});

В результаті ми отримаємо абсолютно той же функціонал, але вже з меншою кількістю коду. Чудово, чи не правда. У наступних статтях ми познайомимося з іншими методами jQuery, реалізують ефекти анімації. На цьому ми завершимо поточну статтю. Більше про jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!