Метод fadeIn
Методът fadeIn плавно показва скрити
елементи, правейки ги непрозрачни. Да скриеш
елементи можеш с помощта на метода
fadeOut,
като ги направиш прозрачни.
Синтаксис
Показване за зададено време,
400мс по подразбиране:
.fadeIn(продължителност);
Времето може да се задава не само в милисекунди,
но и с ключови думи slow (600мс)
и fast (200мс), колкото по-голяма е стойността,
толкова по-бавна е анимацията:
.fadeIn('slow' или 'fast');
Ако не се указват параметри - анимация няма да има, елементите ще се показват мигновено:
.fadeIn();
Може също така с втори параметър да се подаде функция за изглаждане, както и трети параметър callback-функция - ще се изпълни след приключване на анимацията. И двата параметъра не са задължителни:
.fadeIn(продължителност, [функция за изглаждане], [callback-функция]);
На метода могат да се подадат различни опции, под формата на JavaScript обект, съдържащ двойки ключ: стойност:
.fadeIn(options);
Такъв обект може да предава следните
параметри и функции - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Описание
на тези параметри можете да видите за метода
animate. Например,
ще зададем продължителност и функция за изглаждане:
.fadeIn( {duration: 800, easing: easeInSine} );
Пример
В следващия пример при натискане на бутона
#hide елементът с #test ще
се скрива с помощта на метода fadeOut,
а при бутон #show - ще се показва, с
помощта на fadeIn. Също така ще зададем
скорост от 1000мс:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000);
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000);
});
Пример
А в следващия пример след приключване
на анимацията при показване на елемента #test ще
изведем съобщение
с текст '!', а при скриване
с текст '?':
<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
