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 .

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *