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

Вижте също