Від автора: вітаю вас, друзі. Отже, ми продовжуємо вивчення методів jQuery, що дозволяють реалізувати ефекти анімації. Сьогодні ми розглянемо декілька методів slide, а саме: slideUp, slideDown і slideToggle, що працюють з висотою елемента.
Отже, перші два методи сімейства slide, керуючі висотою елемента. Метод slideUp – дозволяє згорнути елемент, тобто зробити його висоту нульовий, за досягнення якої елементу встановлюється властивість display: none. Другий метод – slideDown, навпаки, розгортає елемент до колишньої висоти. Наведемо найпростіший приклад:
Розгорнути
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
У нас є пара кнопок, одна з яких буде згортати блок, а друга розгортати. А тепер пара рядків на jQuery для реалізації магії:
$(function(){
$(‘#hide’).click(function(){
$(‘.panel-body’).slideUp();
});
$(‘#show’).click(function(){
$(‘.panel-body’).slideDown();
});
});
От і все. Тепер клік по тій чи іншій кнопці призведе до заявленого дії. Як і для методів hide / show, для методів slide можна передавати ті ж параметри: тривалість анімації і функцію зворотного виклику.
Замість двох кнопок ми можемо використовувати одну, яка буде згортати елемент, якщо він розгорнуто, і розгортати, якщо він згорнутий. Тут нам знадобиться інший метод – slideToggle, який об’єднує в собі два попередніх методу сімейства slide. приберемо обидві кнопки і замінимо їх одній:
Згорнути / Розгорнути
Відповідно, код jQuery також стане коротшим на один метод:
$(function(){
$(‘#btn’).click(function(){
$(‘.panel-body’).slideToggle();
});
});
В результаті ми отримаємо абсолютно той же функціонал, але вже з меншою кількістю коду. Чудово, чи не правда. У наступних статтях ми познайомимося з іншими методами jQuery, реалізують ефекти анімації. На цьому ми завершимо поточну статтю. Більше про jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!
