Kaedah fadeTo

Kaedah fadeTo mengubah secara lancar keterlihatan elemen kepada nilai yang ditetapkan, dalam julat dari 0 hingga 1.

Sintaks

Tempoh masa dan keterlihatan ditetapkan dalam sebarang variasi penggunaan kaedah. Perubahan keterlihatan dalam tempoh masa yang ditetapkan, 400ms secara lalai:

javascript.fadeTo(tempoh masa, nilai keterlihatan);

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

javascript.fadeTo('slow' atau 'fast', nilai keterlihatan);

Boleh juga dengan parameter ketiga (pilihan) menghantar fungsi callback - akan berfungsi selepas pelaksanaan animasi:

javascript.fadeTo(tempoh masa, nilai keterlihatan, [fungsi callback]);

Boleh juga menghantar fungsi kelancaran dan fungsi callback (parameter pilihan) - akan berfungsi selepas pelaksanaan animasi:

javascript.fadeTo(tempoh masa, nilai keterlihatan, [fungsi kelancaran], [fungsi callback]);

Contoh

Dalam contoh berikut, dengan menggunakan kaedah fadeTo apabila butang #hide ditekan elemen dengan #test akan disembunyikan dengan mengurangkan keterlihatan kepada 0.5, dan pada #show - akan dipaparkan:

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

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

javascript$('#show').on('click', function() {
  $('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
  $('#test').fadeTo(1000, 0.5);
});

Lihat juga