toggle Metodu

toggle metodu, elementlerin yumuşak bir şekilde gösterilmesi ve gizlenmesi arasında geçiş yapar. Eğer element gösteriliyorsa gizlenecek, gizliyse gösterilecektir.

Sözdizimi

Milisanive cinsinden belirtilen sürede gösterim, varsayılan olarak 400ms:

.toggle(süre);

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:

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

display parametresi ile true veya false değeri geçilebilir. Eğer true ise element sadece gösterilir, false ise gizlenir:

.toggle(display);

Eğer parametreler belirtilmezse - animasyon olmayacak, elementler anında gösterilecek/gizlenecektir:

.toggle();

İkinci parametre olarak bir easing fonksiyonu ve üçüncü parametre olarak da bir callback fonksiyonu - animasyon tamamlandığında tetiklenir - geçilebilir. Her iki parametre de isteğe bağlıdır:

.toggle(süre, [easing fonksiyonu], [callback fonksiyonu]);

Sadece ikinci isteğe bağlı parametre olarak bir callback fonksiyonu - animasyon tamamlandığında tetiklenir - geçilebilir:

.toggle(süre, [callback fonksiyonu]);

Metoda, anahtar: değer çiftlerini içeren bir JavaScript nesnesi şeklinde çeşitli seçenekler geçilebilir:

.toggle(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 easing fonksiyonunu ayarlayalım:

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

Örnek

Hadi butona tıklandıktan sonra, toggle metoduyla gizli paragrafı yumuşak bir şekilde gösterelim. slow anahtar kelimesini ileterek hızı 600ms olarak ayarlayacağız. Tekrar tıklandığında - gizleyecek:

<button>metni göster</button>
<p style="display: none">metin</p>

$('button').click(function() {
	$('p').toggle('slow');
});

Ayrıca Bakınız

elementlerin opaklığını değiştiren fadeToggle metodu
elementlerin yumuşak gösterimi/gizlenmesi arasında geçiş yapan slideToggle metodu
elementleri yumuşak bir şekilde gösteren show metodu
elementleri yumuşak bir şekilde gizleyen hide metodu