slideDown Metodu

slideDown metodu, gizli elementleri yukarıdan aşağıya doğru açarak yumuşak bir şekilde gösterir. Elementleri gizlemek için slideUp metodu kullanılabilir.

Sözdizimi

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

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

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

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

.slideDown();

Ayrıca ikinci parametre olarak bir easing 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:

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

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

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

.slideDown( {duration: 600, easing: easeInSine} );

Örnek

Hadi butona tıklandıktan sonra, gizli paragrafı slideDown metoduyla yumuşak bir şekilde gösterelim. slow anahtar kelimesini ileterek hızı 600ms olarak ayarlayacağız. Animasyon bittikten sonra konsola 'Animation complete' yazdıralım:

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

$('button').click(function() {
	$('p').slideDown('slow', function() {
		console.log('Animation complete')
	});
});

Ayrıca Bakınız

elementleri yumuşak bir şekilde gizleyen slideUp metodu
elementlerin yumuşak gösterim/gizleme işlemini değiştiren slideToggle metodu
gizli elementleri opak yaparak yumuşak bir şekilde gösteren fadeIn metodu
elementleri yumuşak bir şekilde gösteren show metodu