Metode slideDown

Metode slideDown menampilkan elemen yang tersembunyi secara halus, menggeluarkannya dari atas ke bawah. Menyembunyikan elemen dapat dilakukan dengan metode slideUp.

Sintaks

Menampilkan dalam waktu yang ditentukan, 400ms secara default:

.slideDown(durasi);

Waktu tidak hanya dapat ditentukan dalam milidetik, tetapi juga dengan kata kunci slow (600ms) dan fast (200ms), semakin besar nilainya, animasi semakin lambat:

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

Jika parameter tidak ditentukan - tidak akan ada animasi, elemen akan ditampilkan secara instan:

.slideDown();

Anda juga dapat meneruskan fungsi easing sebagai parameter kedua, dan juga fungsi callback ketiga - akan dijalankan setelah animasi selesai. Kedua parameter bersifat opsional:

.slideDown(durasi, [fungsi easing], [fungsi callback]);

Anda dapat meneruskan berbagai opsi ke metode, dalam bentuk objek JavaScript, yang berisi pasangan kunci: nilai:

.slideDown(options);

Objek seperti itu dapat meneruskan parameter dan fungsi berikut - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Deskripsi parameter-parameter ini dapat Anda lihat untuk metode animate. Sebagai contoh, mari kita atur durasi dan fungsi easing:

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

Contoh

Setelah tombol ditekan, mari kita tampilkan secara halus paragraf yang tersembunyi menggunakan metode slideDown. Dengan meneruskan kata kunci slow, kita mengatur kecepatan menjadi 600ms. Setelah animasi selesai, kita akan mencetak 'Animation complete' ke konsol:

<button>tampilkan teks</button>
<p style="display: none">teks</p>

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

Lihat juga

metode slideUp,
yang menyembunyikan elemen secara halus
metode slideToggle,
yang bergantian menampilkan/menyembunyikan elemen secara halus
metode fadeIn,
yang menampilkan elemen yang tersembunyi secara halus, membuatnya tidak transparan
metode show,
yang menampilkan elemen secara halus