Kaedah slideToggle
Kaedah slideToggle secara lancar memaparkan
elemen tersembunyi dan menyembunyikan elemen yang dipaparkan.
Sintaks
Paparan/sembunyian dalam tempoh masa yang ditetapkan,
400ms secara lalai:
.slideToggle(duration);
Masa boleh ditetapkan bukan sahaja dalam milisaat,
tetapi juga dengan kata kunci slow (600ms)
dan fast (200ms), semakin besar nilai,
semakin perlahan animasi:
.slideToggle('slow' atau 'fast');
Jika parameter tidak dinyatakan - animasi tidak akan berlaku, elemen akan dipaparkan/disembunyikan serta-merta:
.slideToggle();
Anda juga boleh menghantar fungsi kelancaran sebagai parameter kedua, dan juga fungsi panggilan balik ketiga - akan berfungsi selepas selesai animasi. Kedua-dua parameter adalah pilihan:
.slideToggle(duration, [easing function], [callback function]);
Anda boleh menghantar pelbagai pilihan kepada kaedah, dalam bentuk objek JavaScript, yang mengandungi pasangan key: value:
.slideToggle(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 kelancaran:
.slideToggle( {duration: 600, easing: easeInSine} );
Contoh
Mari selepas butang ditekan, kita sembunyikan secara lancar
div induk, yang mengandungi perenggan,
dengan menggunakan kaedah slideToggle (div ini
kita akan cari dengan menggunakan kaedah
parent),
selepas butang ditekan sekali lagi, div akan
dipaparkan secara lancar semula dan seterusnya. Dengan menghantar kata kunci
slow, kita menetapkan kelajuan kepada 600ms:
<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');
});
