АКЦЫЯ: бясплатныя месячныя курсы па стварэнні сайтаў
на выбар: вёрстка, JavaScript, PHP, Python або фрэймворкі. Сёння апошні дзень для запісу! Націскай!
106 of 119 menu

Метад slideDown

Метад slideDown плаўна паказвае схаваныя элементы, выкатваючы іх зверху ўніз. Схаваць элементы можна з дапамогай метаду slideUp.

Сінтаксіс

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

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

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

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

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

.slideDown();

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

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

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

.slideDown(options);

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

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

Прыклад

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

<button>show text</button> <p style="display: none">text</p> $('button').click(function() { $('p').slideDown('slow', function() { console.log('Animation complete') }); });

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

  • метад slideUp,
    які плаўна схавае элементы
  • метад slideToggle,
    які чаргуе плаўны паказ/схаванне элементаў
  • метад fadeIn,
    які плаўна паказвае схаваныя элементы, робячы іх непразрыстымі
  • метад show,
    які плаўна паказвае элементы
byenru