Kaedah fadeToggle

Kaedah fadeToggle secara bergilir-gilir memaparkan atau menyembunyikan elemen dengan lancar, menganimasikan ketelusan mereka.

Sintaks

Paparan/sembunyian dalam masa yang ditetapkan, lalai 400ms:

javascript.fadeToggle(tempoh);

Masa boleh ditetapkan bukan sahaja dalam milisaat, tetapi juga dengan kata kunci slow (600ms) dan fast (200ms), lebih besar nilainya, lebih perlahan animasinya:

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

Jika parameter tidak dinyatakan - animasi tidak akan berlaku, elemen akan dipaparkan/disembunyikan serta-merta:

javascript.fadeToggle();

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:

javascript.fadeToggle(tempoh, [fungsi kelancaran], [fungsi panggilan balik]);

Anda boleh menghantar pelbagai pilihan kepada kaedah, dalam bentuk objek JavaScript, yang mengandungi pasangan kunci: nilai:

javascript.fadeToggle(pilihan);

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:

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

Contoh

Dalam contoh berikut, pada tekan pertama pada butang #toggle elemen dengan #test akan disembunyikan, dan pada tekan berulang - akan dipaparkan. Untuk ini kami menggunakan kaedah fadeToggle. Juga kami akan menetapkan kelajuan kepada 1000ms dan nilai fungsi kelancaran kepada linear:

html<button id="toggle">toggle</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#toggle').on('click', function() {
  $('#test').fadeToggle(1000, 'linear');
});

Lihat juga