fadeToggle Metodu

fadeToggle metodu, elementleri sırayla yumuşak bir şekilde gösterir veya gizler ve opaklıklarını animasyonla değiştirir.

Sözdizimi

Belirli bir sürede gösterme/gizleme, varsayılan olarak 400ms:

javascript.fadeToggle(süre);

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

javascript.fadeToggle('slow' veya 'fast');

Eğer parametreler belirtilmezse - animasyon olmaz, elementler anında gösterilir/gizlenir:

javascript.fadeToggle();

Ayrıca ikinci parametre olarak bir geçiş fonksiyonu, ve üçüncü parametre olarak bir callback fonksiyonu - animasyon tamamlandıktan sonra çalışır - iletilebilir. Her iki parametre de isteğe bağlıdır:

javascript.fadeToggle(süre, [geçiş fonksiyonu], [callback fonksiyonu]);

Metoda, JavaScript nesnesi şeklinde, anahtar: değer çiftleri içeren çeşitli seçenekler iletilerek kullanılabilir:

javascript.fadeToggle(seçenekler);

Böyle bir nesne aşağıdaki parametreleri ve fonksiyonları iletebilir - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Bu parametrelerin açıklamalarını animate metodu için inceleyebilirsiniz. Örneğin, süreyi ve geçiş fonksiyonunu ayarlayalım:

javascript.fadeToggle( {duration: 800, easing: easeInSine} );

Örnek

Aşağıdaki örnekte, #toggle düğmesine ilk tıklandığında #test elementi gizlenecek, tekrar tıklandığında ise gösterilecektir. Bunun için fadeToggle metodunu kullanıyoruz. Ayrıca hızı 1000ms olarak ve geçiş fonksiyonu değerini linear olarak ayarlayacağız:

html<button id="toggle">toggle</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#toggle').on('click', function() {
  $('#test').fadeToggle(1000, 'linear');
});

Ayrıca Bakınız