Метад toggle

Метад toggle чаргуе плаўны паказ/схаванне элементаў. Калі элемент паказаны, то ён будзе схаваны і наадварот.

Сінтаксіс

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

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

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

.toggle('slow' ці 'fast');

Можна параметрам display перадаваць значэнне true ці false. Калі true, то элемент будзе толькі паказвацца, false - схавацца:

.toggle(display);

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

.toggle();

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

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

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

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

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

.toggle(options);

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

.toggle( {duration: 800, easing: easeInSine} );

Прыклад

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

<button>show text</button>
<p style="display: none">text</p>

$('button').click(function() {
	$('p').toggle('slow');
});

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

метад fadeToggle,
які мяняе празрыстасць элементаў
метад slideToggle,
які чаргуе плаўны паказ/схаванне элементаў
метад show,
які плаўна паказвае элементы
метад hide,
які плаўна схавае элементы