Kaedah slideDown

Kaedah slideDown memaparkan elemen tersembunyi dengan lancar, menggulirkannya dari atas ke bawah. Elemen boleh disembunyikan dengan kaedah slideUp.

Sintaks

Paparan untuk tempoh masa yang ditentukan, lalai 400ms:

.slideDown(duration);

Masa boleh ditetapkan bukan sahaja dalam milisaat, tetapi juga dengan kata kunci slow (600ms) dan fast (200ms), semakin besar nilai, semakin perlahan animasi:

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

Jika tiada parameter dinyatakan - tiada animasi, elemen akan dipaparkan serta-merta:

.slideDown();

Anda juga boleh menghantar fungsi easing sebagai parameter kedua, dan fungsi callback ketiga - akan dilaksanakan selepas animasi siap. Kedua-dua parameter adalah pilihan:

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

Anda boleh menghantar pelbagai pilihan kepada kaedah, dalam bentuk objek JavaScript, yang mengandungi pasangan kunci: nilai:

.slideDown(options);

Objek sedemikian boleh menghantar parameter dan fungsi berikut - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Penerangan parameter ini anda boleh lihat untuk kaedah animate. Sebagai contoh, mari kita tetapkan tempoh dan fungsi easing:

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

Contoh

Mari selepas butang ditekan, kita paparkan perenggan tersembunyi dengan lancar menggunakan kaedah slideDown. Dengan menghantar kata kunci slow, kita menetapkan kelajuan kepada 600ms. Selepas animasi selesai, kita akan output kepada konsol 'Animation complete':

<button>show text</button>
<p style="display: none">text</p>

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

Lihat juga

kaedah slideUp,
yang menyembunyikan elemen dengan lancar
kaedah slideToggle,
yang berselang-seli paparan/sembunyi elemen yang lancar
kaedah fadeIn,
yang memaparkan elemen tersembunyi dengan lancar, menjadikannya legap
kaedah show,
yang memaparkan elemen dengan lancar