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:

javascript.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:

javascript.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:

javascript.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:

javascript.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:

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

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

Ayrıca Bakınız