English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Метод slideToggle() эффекта jQuery

Методы эффектов jQuery

Метод slideToggle() вslideUp()иslideDown()Переключение между методами.

Этот метод проверяет видимость выбранного элемента:

  • Если элемент вначале видим, то он будет скрыт.

  • Если элемент вначале скрыт, то он будет видим.

Внимание:Скрытые элементы больше не влияют на макет страницы.

Синтаксис:

$(selector).slideToggle(duration, easing, callback)

Пример

Переключение между поднятием и опусканием всех элементов <p> при нажатии на кнопку:

$("button").click(function(){
  $("p").slideToggle();
});
Протестируйте, посмотрите‹/›

ИспользованиеdurationПараметры:

$("button").click(function(){
  $("p").slideToggle(1500);
});
Протестируйте, посмотрите‹/›

ИспользованиеcallbackПараметры:

$("button").click(function(){
  $("div").slideToggle(1500, function() {}})
    alert("Эффект скольжения переключения завершен!!!");
  });
});
Протестируйте, посмотрите‹/›

Используйте медленную продолжительность и линейную сглаживающую функцию для переключения всех “ .panel”:

$("#my-Div").click(function() {
  $(".panel").slideToggle("slow", "linear");
});
Протестируйте, посмотрите‹/›

Значение параметра

ПараметрОписание
durationОпционально: определяет продолжительность эффекта скольжения. Параметр по умолчанию 400 миллисекунд

Возможные значения:

  • миллисекунды (например, 100, 500, 2000 и т.д.)

  • “fast”

  • “slow”

easingОпционально: строка, определяющая скорость элемента в различных точках анимации. по умолчанию “swing”

Возможные значения:

  • “swing” - медленнее движется в начале/конце, быстрее в середине

  • “linear” - движение с постоянной скоростью

callbackОпционально: после завершения метода slideToggle() вызывается эта функция, один раз для каждого выбранного элемента

Методы эффектов jQuery