Metode fadeTo

Metode fadeTo secara halus mengubah opasitas elemen ke nilai yang ditentukan, dalam rentang dari 0 hingga 1.

Sintaks

Durasi dan opasitas ditentukan dalam segala varian penggunaan metode. Mengubah opasitas dalam waktu yang ditentukan, 400ms secara default:

javascript.fadeTo(durasi, nilai opasitas);

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

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

Dapat juga dengan parameter ketiga (opsional) melewatkan fungsi callback - akan dijalankan setelah penyelesaian animasi:

javascript.fadeTo(durasi, nilai opasitas, [fungsi callback]);

Dapat juga melewatkan fungsi easing dan fungsi callback (parameter opsional) - akan dijalankan setelah penyelesaian animasi:

javascript.fadeTo(durasi, nilai opasitas, [fungsi easing], [fungsi callback]);

Contoh

Dalam contoh berikut, dengan menggunakan metode fadeTo saat tombol #hide ditekan, elemen dengan #test akan disembunyikan dengan mengurangi opasitas hingga 0.5, dan pada #show - akan ditampilkan:

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