Эффект "Сворачивание"

jQuery позволяет создавать визуальный эффект, когда элемент сворачиваться/разворачиваться за счет плавного изменения высоты элемента.

Нажмите, чтобы открыть/закрыть панель

Так как время дорого, мы предоставляем учебные материалы быстро и без задержек.

На нашем сайте вы найдете самые разнообразные учебные материалы в удобном формате.

В jQuery есть следующие методы, создающие эффект сворачивания:

jQuery метод slideDown() используется для разворачивания элемента.

Синтаксис:

$(селектор).slideDown(speed,callback);

Необязательный параметр speed определяет продолжительность эффекта и может принимать следующие значения: "slow", "fast" или число миллисекунд.

Необязательный параметр callback – это функция, которая выполняется после того, как эффект закончится.

В следующем примере демонстрируется метод slideDown():


$("#flip").click(function(){
  $("#panel").slideDown();
});

jQuery метод slideUp() используется для сворачивания элемента.

Синтаксис:

$(селектор).slideUp(speed,callback);

Необязательный параметр callback – это функция, которая выполняется после того, как эффект закончится.

В следующем примере демонстрируется метод slideUp():


$("#flip").click(function(){
   $("#panel").slideUp();
});

jQuery метод slideToggle() переключает между методами slideDown() и slideUp().

Если элемент был развернут, то slideToggle() сворачивает его.

Если элемент был свернут, то slideToggle() разворачивает его.

Синтаксис:

$(селектор).slideToggle(speed,callback);

Необязательный параметр callback – это функция, которая выполняется после того, как эффект закончится.

В следующем примере демонстрируется метод slideToggle():


$("#flip").click(function(){
   $("#panel").slideToggle();
});