Інструкції - PHP та jQuery

Метод .slideUp() дозволяє плавно зменшити висоту елемента до 0. Як тільки висота елемента досягає нульового значення, йому надається властивість display:none, що виключає вплив елемента на компонування сторінки. Метод .slideDown() виконує зворотну дію: він видаляє властивість display:none і збільшує висоту елемента від 0 до її вихідного значення.

Аналогічно методам .fadeln() і .fadeOut() , ці методи приймають два необов'язкові параметри: тривалість анімації та функцію зворотного виклику. Як демонстраційний приклад поверніть абзац з класом foo за висотою, виведіть повідомлення у вікні консолі, а потім розгорніть абзац до його початкового розміру та знову виведіть відповідне повідомлення.

$("p.foo") .slideUp(1000, function() < console.log("Прихований!"); >) .slideDown(1000, function( ) < console.log("Відображено!"); >);

Метод. slideToggle() робить те саме, що й методи .slideUp() і .slideDown() , досить "інтелектуальний" і здатний самостійно визначити, яку дію необхідно виконати, залежно від того, прихований елемент або відображений.

Щоб перевірити, як працює цей метод, застосуйте його до абзацу з класом foo.

$("p.foo") .slideToggle("slow", function() < console.log("Переключається!"); >);

Виконавши цей код послідовно кілька разів, ви побачите, як абзац поперемінно згортається по висоті, то розгортається.