slideToggle Metodu
slideToggle metodu, gizli elemanları
yumuşak bir şekilde gösterir ve görünür elemanları gizler.
Sözdizimi
Belirli bir sürede gösterme/gizleme,
varsayılan olarak 400ms:
.slideToggle(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:
.slideToggle('slow' veya 'fast');
Parametre belirtilmezse - animasyon olmaz, elemanlar anında gösterilir/gizlenir:
.slideToggle();
İkinci parametre olarak bir easing fonksiyonu, üçüncü parametre olarak da bir callback fonksiyonu - animasyon tamamlandığında çalışır - iletilir. Her iki parametre de isteğe bağlıdır:
.slideToggle(süre, [easing fonksiyonu], [callback fonksiyonu]);
Metoda, JavaScript nesnesi şeklinde, anahtar: değer çiftleri içeren çeşitli seçenekler iletilir:
.slideToggle(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 metodunda bulabilirsiniz. Örneğin,
süreyi ve easing fonksiyonunu ayarlayalım:
.slideToggle( {duration: 600, easing: easeInSine} );
Örnek
Butona tıklandıktan sonra, paragrafları içeren
ebeveyn div'ini, slideToggle metoduyla
yumuşak bir şekilde gizleyelim (bu div'i
parent metoduyla
bulacağız).
Butona tekrar tıklandığında, div
tekrar yumuşak bir şekilde gösterilecek vb.
slow anahtar kelimesini ileterek
hızı 600ms olarak ayarlayacağız:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
