Методот fadeOut

Методот fadeOut постечно ги скрива елементите. Елементите може да се прикажат со методот fadeIn, правејќи ги непровидни.

Синтакса

Приказ за зададено време, 400ms по основно:

javascript.fadeOut(времетраење);

Времето може да се зададе не само во милисекунди, туку и со клучни зборови slow (600ms) и fast (200ms), колку е поголема вредноста, толку е побавна анимацијата:

javascript.fadeOut('slow' или 'fast');

Ако не се наведат параметри - нема да има анимација, елементите ќе се сокријат моментално:

javascript.fadeOut();

Може исто така како втор параметар да се пренесе функција за забавување, а како трет callback-функција - ќе се активира по извршувањето на анимацијата. Двата параметри не се задолжителни:

javascript.fadeOut(времетраење, [функција за забавување], [callback-функција]);

На методот може да се пренесат различни опции, во форма на JavaScript објект, кој содржи парови клуч: вредност:

javascript.fadeOut(опции);

Ваквиот објект може да пренесува следните параметри и функции - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Опис на овие параметри може да го погледнете за методот animate. На пример, да ја поставиме времетраењето и функцијата за забавување:

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

Пример

Во следниот пример при кликнување на копчето #hide елементот со #test ќе се скрие со методот fadeOut, а на копчето #show - ќе се прикаже, со помош на fadeIn. Исто така ќе ја поставиме брзината на 1000ms:

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('?');
  });
});

Погледнете ги и