Kaedah toggle

Kaedah toggle menggilir paparan/sembunyian elemen secara lancar. Jika elemen dipaparkan, ia akan disembunyikan dan sebaliknya.

Sintaks

Paparan untuk tempoh masa yang ditentukan dalam milisaat, 400ms secara lalai:

javascript.toggle(duration);

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

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

Boleh parameter display menghantar nilai true atau false. Jika true, maka elemen hanya akan dipaparkan, false - disembunyikan:

javascript.toggle(display);

Jika tidak menyatakan parameter - animasi tidak akan ada, elemen akan dipaparkan/disembunyikan secara serta-merta:

javascript.toggle();

Boleh juga parameter kedua menghantar fungsi kelancaran, dan juga parameter ketiga fungsi panggil balik - akan berfungsi selepas animasi selesai. Kedua-dua parameter adalah pilihan:

javascript.toggle(duration, [fungsi kelancaran], [fungsi panggil balik]);

Boleh hanya parameter kedua pilihan menghantar fungsi panggil balik - akan berfungsi selepas animasi selesai:

javascript.toggle(duration, [fungsi panggil balik]);

Boleh menghantar pelbagai pilihan kepada kaedah, dalam bentuk objek JavaScript, mengandungi pasangan kunci: nilai:

javascript.toggle(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, tetapkan tempoh masa dan fungsi kelancaran:

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

Contoh

Mari selepas butang ditekan, paparkan perenggan tersembunyi secara lancar menggunakan kaedah toggle. Dengan menghantar kata kunci slow, kami menetapkan kelajuan kepada 600ms. Dengan tekan semula - sembunyikan:

html<button>papar teks</button>
<p style="display: none">teks</p>
javascript$('button').click(function() {
  $('p').toggle('slow');
});

Lihat juga

  • kaedah fadeToggle,
    yang mengubah ketelusan elemen
  • kaedah slideToggle,
    yang menggilir paparan/sembunyian elemen secara lancar
  • kaedah show,
    yang memaparkan elemen secara lancar
  • kaedah hide,
    yang menyembunyikan elemen secara lancar