Metode toggle

Metode toggle bergantian menampilkan/menyembunyikan elemen dengan halus. Jika elemen ditampilkan, maka akan disembunyikan dan sebaliknya.

Sintaks

Menampilkan dalam waktu yang ditentukan dalam milidetik, 400ms secara default:

.toggle(durasi);

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

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

Dapat dengan parameter display meneruskan nilai true atau false. Jika true, maka elemen akan hanya ditampilkan, false - disembunyikan:

.toggle(display);

Jika tidak menentukan parameter - tidak akan ada animasi, elemen akan ditampilkan/disembunyikan secara instan:

.toggle();

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

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

Dapat hanya dengan parameter kedua yang opsional meneruskan fungsi callback - akan dijalankan setelah animasi selesai:

.toggle(durasi, [fungsi callback]);

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

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

.toggle( {duration: 800, easing: easeInSine} );

Contoh

Mari setelah tombol ditekan, kita tampilkan dengan halus paragraf yang disembunyikan menggunakan metode toggle. Dengan meneruskan kata kunci slow, kita atur kecepatannya menjadi 600ms. Dengan penekanan berulang - sembunyikan:

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

$('button').click(function() {
	$('p').toggle('slow');
});

Lihat juga

metode fadeToggle,
yang mengubah transparansi elemen
metode slideToggle,
yang bergantian menampilkan/menyembunyikan elemen dengan halus
metode show,
yang menampilkan elemen dengan halus
metode hide,
yang menyembunyikan elemen dengan halus