Метад fadeIn

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

Сінтаксіс

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

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

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

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

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

javascript.fadeIn();

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

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

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

javascript.fadeIn(options);

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

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

Прыклад

У наступным прыкладзе пры націсканні на кнопку #hide элемент з #test будзе схавацца з дапамогай метаду fadeOut, а на кнопку #show - паказвацца, з дапамогай fadeIn. Таксама мы ўсталюем хуткасць на 1000мс:

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000);
});

Прыклад

А ў наступным прыкладзе пасля заканчэння анімацыі пры паказе элемента #test мы вывядзем паведамленне з тэкстам '!', а пры схаванні з тэкстам '?':

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

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