Метад slideToggle

Метад slideToggle плаўна паказвае схаваныя элементы і схавае паказаныя.

Сінтаксіс

Паказ/схаванне за зададзены час, 400мс па змаўчанні:

javascript.slideToggle(працягласць);

Час можна задаваць не толькі ў мілісекундах, але і ключавымі словамі slow (600мс) і fast (200мс), чым большае значэнне, тым павольней анімацыя:

javascript.slideToggle('slow' ці 'fast');

Калі не паказваць параметры - анімацыі не будзе, элементы будуць паказвацца/схавацца імгненна:

javascript.slideToggle();

Можна таксама другім параметрам перадаць функцыю плаўнасці, а таксама трэцім callback-функцыю - спрацуе пасля выканання анімацыі. Абодва параметры неабавязковыя:

javascript.slideToggle(працягласць, [функцыя плаўнасці], [callback-функцыя]);

Можна перадаць метаду розныя опцыі, у выглядзе аб'екта JavaScript, які змяшчае пары ключ: значэнне:

javascript.slideToggle(options);

Такі аб'ект можа перадаваць наступныя параметры і функцыі - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Апісанне гэтых параметраў вы можаце паглядзець для метаду animate. Напрыклад, усталюем працягласць і функцыю плаўнасці:

javascript.slideToggle( {duration: 600, easing: easeInSine} );

Прыклад

Давайце пасля націску кнопкі, плаўна схаваем бацькоўскі div, які змяшчае абзацы, з дапамогай метаду slideToggle (гэты div мы знойдзем з дапамогай метаду parent), пасля паўторнага націску кнопкі, div будзе зноў плаўна паказаны і г.д. Перадаўшы ключавое слова slow, мы ўсталюем хуткасць на 600мс:

html<button>toggle text</button>
<div>
  <p id='test'>text text text text text text text</p>
  <p>text text text text text text text</p>
  <p>text text text text text text text</p>
</div>

javascript$('button').click(function() {
  $('#test').parent().slideToggle('slow');
});

Глядзіце таксама