Kaedah fadeOut

Kaedah fadeOut menyembunyikan elemen secara beransur-ansur. Elemen boleh dipaparkan menggunakan kaedah fadeIn, dengan menjadikannya tidak lutsinar.

Sintaks

Paparan untuk tempoh masa yang ditetapkan, 400ms secara lalai:

javascript.fadeOut(tempoh);

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

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

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

javascript.fadeOut();

Anda juga boleh menghantar fungsi pelancaran sebagai parameter kedua, dan fungsi panggil balik ketiga - akan berfungsi selepas selesai animasi. Kedua-dua parameter adalah pilihan:

javascript.fadeOut(tempoh, [fungsi pelancaran], [fungsi panggil balik]);

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

javascript.fadeOut(pilihan);

Objek sedemikian boleh menghantar berikut parameter dan fungsi - 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 pelancaran:

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

Contoh

Dalam contoh berikut, apabila butang ditekan #hide elemen dengan #test akan disembunyikan menggunakan kaedah fadeOut, dan pada butang #show - dipaparkan, dengan menggunakan fadeIn. Kami juga akan menetapkan kelajuan kepada 1000ms:

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

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

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

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

Contoh

Dan dalam contoh berikut, selepas tamat animasi apabila memaparkan elemen #test kami akan memaparkan mesej dengan teks '!', dan apabila menyembunyikan dengan teks '?':

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

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

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Lihat juga