Metode slideToggle
Metode slideToggle secara halus menampilkan
elemen yang tersembunyi dan menyembunyikan elemen yang ditampilkan.
Sintaks
Menampilkan/menyembunyikan dalam waktu yang ditentukan,
default 400ms:
.slideToggle(durasi);
Waktu dapat ditentukan tidak hanya dalam milidetik,
tetapi juga dengan kata kunci slow (600ms)
dan fast (200ms), semakin besar nilainya,
semakin lambat animasinya:
.slideToggle('slow' atau 'fast');
Jika parameter tidak ditentukan - tidak akan ada animasi, elemen akan ditampilkan/disembunyikan secara instan:
.slideToggle();
Anda juga dapat meneruskan fungsi easing sebagai parameter kedua, dan juga fungsi callback ketiga - akan dijalankan setelah animasi selesai. Kedua parameter bersifat opsional:
.slideToggle(durasi, [fungsi easing], [fungsi callback]);
Anda dapat meneruskan berbagai opsi ke metode, dalam bentuk objek JavaScript, yang berisi pasangan kunci: nilai:
.slideToggle(options);
Objek seperti itu dapat meneruskan
parameter dan fungsi berikut - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Deskripsi
parameter ini dapat Anda lihat untuk metode
animate. Contohnya,
mari kita atur durasi dan fungsi easing:
.slideToggle( {duration: 600, easing: easeInSine} );
Contoh
Setelah tombol ditekan, mari kita sembunyikan secara halus
div induk, yang berisi paragraf,
dengan metode slideToggle (div ini
akan kita temukan dengan metode
parent),
setelah tombol ditekan lagi, div akan
ditampilkan kembali secara halus dan seterusnya. Dengan meneruskan kata kunci
slow, kita mengatur kecepatan ke 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');
});
