Метод 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('?');
  });
});

Погледајте такође