fadeTo Metodu

fadeTo metodu, bir elementin şeffaflığını 0 ile 1 aralığında, belirli bir değere yumuşak bir şekilde değiştirir.

Sözdizimi

Süre ve şeffaflık, metodun herhangi bir kullanım varyantında belirtilir. Şeffaflığın belirli bir sürede değiştirilmesi, varsayılan olarak 400ms:

.fadeTo(süre, şeffaflık değeri);

Süre sadece milisaniye cinsinden değil, aynı zamanda slow (600ms) ve fast (200ms) anahtar kelimeleriyle de belirtilebilir. Değer ne kadar büyükse, animasyon o kadar yavaş olur:

.fadeTo('slow' veya 'fast', şeffaflık değeri);

Üçüncü bir (isteğe bağlı) parametre olarak bir callback fonksiyonu iletilerek, animasyon tamamlandıktan sonra çalıştırılabilir:

.fadeTo(süre, şeffaflık değeri, [callback fonksiyonu]);

Ayrıca bir easing fonksiyonu ve bir callback fonksiyonu (isteğe bağlı parametreler) iletilerek, animasyon tamamlandıktan sonra çalıştırılabilir:

.fadeTo(süre, şeffaflık değeri, [easing fonksiyonu], [callback fonksiyonu]);

Örnek

Aşağıdaki örnekte, fadeTo metodu kullanılarak, #hide düğmesine tıklandığında #test elementi şeffaflığı 0.5 değerine düşürülerek gizlenecek, #show düğmesine tıklandığında ise gösterilecektir:

<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);
});

Ayrıca Bakınız

elementlerin şeffaflığını değiştiren fadeToggle metodu
gizli elementleri şeffaflıklarını kaldırarak yumuşak bir şekilde gösteren fadeIn metodu
elementlerin özelliklerini animasyonla değiştiren animate metodu