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:

javascript.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:

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

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

javascript.toggle(display);

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

javascript.toggle();

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

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

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

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

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

javascript.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:

javascript.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:

html<button>tampilkan teks</button>
<p style="display: none">teks</p>
javascript$('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