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:

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

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

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

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

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

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

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

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

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

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

Ayrıca Bakınız

elementlerin yumuşak gösterme/gizlemesini değiştiren slideToggle metodu
elementlerin opaklığını değiştiren fadeTo metodu
elementlerin yumuşak gösterme/gizlemesini değiştiren toggle metodu
element özelliklerini animasyonla değiştiren animate metodu