Метод fadeTo

Методът fadeTo плавно променя прозрачността на елемента до зададена стойност, в диапазон от 0 до 1.

Синтаксис

Продължителността и прозрачността се задават при всякакъв вариант на използване на метода. Промяна на прозрачността за зададено време, 400мс по подразбиране:

.fadeTo(продължителност, стойност на прозрачността);

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

.fadeTo('slow' или 'fast', стойност на прозрачността);

Може също трети (незадължителен) параметър да се подаде callback-функция - ще се изпълни след приключване на анимацията:

.fadeTo(продължителност, стойност на прозрачността, [callback-функция]);

Може също да се подават функция за плавност и callback-функция (незадължителни параметри) - ще се изпълни след приключване на анимацията:

.fadeTo(продължителност, стойност на прозрачността, [функция за плавност], [callback-функция]);

Пример

В следващия пример, чрез метода fadeTo при натискане на бутона #hide елементът с #test ще се скрива чрез намаляване на прозрачността до 0.5, а при #show - ще се показва:

<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').fadeTo(1000, 1);
});

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

Вижте също

метод fadeToggle,
който променя прозрачността на елементите
метод fadeIn,
който плавно показва скрити елементи, правейки ги непрозрачни
метод animate,
който анимира свойствата на елементите