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:

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

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

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

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

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

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

<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

kaedah fadeToggle,
yang mengubah keterlihatan elemen
kaedah fadeIn,
yang memaparkan secara lancar elemen tersembunyi, membuatkannya tidak lutsinar
kaedah animate,
yang menganimasikan sifat elemen