jQuery slideUp, slideDown, slideToggle

Библиотека jQuery предоставляет сразу три полезных метода слайдинга: slideUp, jQuery slideDown и slideToggle. Эти методы можно применять для отображения и скрытия элементов HTML DOM с помощью анимации.

jQuery slide

Мы рассмотрим различные методы реализации слайдеров в jQuery с примерами.

  1. jQuery slideDown(): используется, чтобы показать скрытый элемент HTML, развертывая окно с контентом вниз;
  2. jQuery slideUp(): применяется, чтобы скрыть элемент HTML, свертывая окно с контентом вверх;
  3. jQuery slideToggle(): используется, чтобы поочередно сворачивать и разворачивать элемент HTML. Если элемент спрятан, его нужно развернуть методом slideDown(). Для видимых элементов, наоборот, применяется slideUp().

jQuery slideDown

Метод jQuery slideDown() применяется, чтобы плавно развернуть элементы html. Атрибут height выбранного элемента анимирован, поэтому его нижняя часть будет плавно разворачиваться. Параметры метода slideDown() определяют то, как будет выполняться развертывание.

Варианты синтаксиса метода slideDown():

  1. slideDown(duration);
  2. slideDown(duration, callBackfunction);
  3. slideDown(speed, easing, callBackfunction);
  4. slideDown(options).

duration: продолжительность (duration) задается в миллисекундах. Также можно задать строковые значения, такие как «slow» (медленно) и «fast» (быстро). По умолчанию длительность составляет 400 миллисекунд.

Функция callBackfunction: эта функция активизируется после завершения эффекта.

easing: данный параметр определяет, какая функция будет использована для анимации: «swing» или «linear». Значением по умолчанию является «swing».

options: duration, callBackfunction, easing, special easing и т. д.

Пример jQuery slideDown

В этом примере jQuery slideDown() реализации метод принимает два параметра: продолжительность (duration) со значением «slow» и функция обратного вызова. Запустив эту программу, можно увидеть, как функция обратного вызова стартует после завершения эффекта.

jQuery-slideDown.html

<!DOCTYPE html><html><head><title>jQuery Slide Down</title><script src="http://code.jquery.com/jquery-2.1.1.js"></script><script> 
$(document).ready(function(){
  $("#btn1").click(function(){
    $(".divClass").slideDown("slow",function ()
    {
       $("#textMsg").text("Slide Down completed.");
    });
  });});</script>
 <style> .divClass{
    padding:5px;
    text-align:center;
    background-color:green;
    border:solid 1px;}.divClass{
    padding:50px;
    display:none;}</style></head><body>
<button id="btn1">Click Me to slide down</button><div class="divClass"><b>JournalDev</b> <br><br>jQuery SlideDown</div><div id="textMsg"></div>
</body></html>

Вот как эффект развертывания выполняется в jQuery. Параметры этого метода похожи на jQuery hide() и show(). Ниже показан результат применения программы.

Посмотреть результат

jQuery slideUp

Методы jQuery slideUp и slideDown() применяются, чтобы плавно свернуть элементы html. Атрибут height выбранного элемента анимирован, поэтому он будет сворачиваться плавно, поднимая нижнюю часть.

Варианты синтаксиса метода slideUp():

  1. slideUp (duration);
  2. slideUp (duration,callBackfunction);
  3. slideUp (speed,easing,callbackMethod);
  4. slideUp (options).

duration: продолжительность (duration) задается в миллисекундах. Также можно задать строковые значения, такие как «slow» (медленно) и «fast» (быстро). По умолчанию длительность составляет 400 миллисекунд.

Функция callBackfunction: эта функция активизируется после завершения слайдинга.

easing: определяет, какая функция плавности будет использована для анимации: «swing» или «linear». Значением по умолчанию — «swing».

options: duration, callBackfunction, easing, special easing и т. д.

Пример jQuery slideUp

В этом примере (без jQuery slideDown) метод slideUp() принимает два параметра: продолжительность (duration) со значением «slow» и функцию обратного вызова. Запустив эту программу, можно увидеть, как функция обратного вызова стартует после завершения эффекта.

jQuery-slideUp.html

<!DOCTYPE html><html><head><title>jQuery Slide Up</title><script src="http://code.jquery.com/jquery-2.1.1.js"></script><script> 
$(document).ready(function(){
    $("#btn1").click(function(){
    $(".divClass").slideUp("slow",function()
    {
      $("#textMsg").text("Slide Up completed.");
    });
  });
});</script>
 <style> .divClass{
    margin-top:20px;
    padding:10px;
    text-align:center;
    background-color:green;
    border:solid 1px;
    height:200px;
    width: 300px;}</style></head><body>
<button id="btn1">Click Me to slide up</button><div class="divClass"><br><b>JournalDev</b> <br><br>jQuery SlideUp</div><div id="textMsg"></div>
</body></html>

Вот как эффект jQuery slideUp slideDown() выполняется.

Посмотреть результат

jQuery slideToggle

Методы jQuery Toggle и slideDown используются, чтобы показать или скрыть элементы html. Атрибут height выбранного элемента анимирован, поэтому его нижняя часть будет плавно разворачиваться или сворачиваться. Метод slideToggle() сначала проверяет видимость выбранного элемента. Если элемент раскрыт, то будет применен метод slideUp(), если нет — slideDown().

Варианты синтаксиса метода slideToggle():

  1. slideToggle (duration);
  2. slideToggle (duration,callBackfunction);
  3. slideToggle (speed,easing,callbackMethod);
  4. slideToggle (options).

Пример jQuery slideToggle

В данном примере slideToggle() принимает два параметра: продолжительность (duration) со значением «slow» и функцию обратного вызова. Запустив эту программу, можно увидеть, как функция обратного вызова стартует после завершения эффекта.

jQuery-slideToggle.html

<!DOCTYPE html><html><head><title>jQuery Slide Toggle</title><script src="http://code.jquery.com/jquery-2.1.1.js"></script><script> 
$(document).ready(function(){
    $("#btn1").click(function(){
    $(".divClass").slideToggle("slow",function()
    {
      alert("Slide Toggle Method completed.");
    });
  });});</script>
 <style> .divClass{
    margin-top:20px;
    padding:10px;
    text-align:center;
    background-color:green;
    border:solid 1px;
    height:200px;
    width: 300px;}</style></head><body>
<button id="btn1">Click Me to slide Toggle</button><div class="divClass"><br><b>JournalDev</b> <br><br>jQuery SlideToggle</div><div id="textMsg"></div>
</body></html>

Так можно переключаться между методами jQuery slideUp slideDown, чтобы скрыть или показать элементы html.

Посмотреть результат

Перевод статьи “jQuery slideUp, slideDown, slideToggle” был подготовлен дружной командой проекта Сайтостроение от А до Я.