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:

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

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

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

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

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

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

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

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

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

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

Lihat juga

metode fadeToggle,
yang mengubah opasitas elemen
metode fadeIn,
yang secara halus menampilkan elemen tersembunyi, membuatnya tidak transparan
metode animate,
yang menganimasikan properti elemen