Metode fadeOut

Metode fadeOut menyembunyikan elemen secara halus. Menampilkan elemen dapat dilakukan dengan metode fadeIn, dengan membuatnya tidak transparan.

Sintaks

Menampilkan dalam waktu yang ditentukan, 400ms secara default:

javascript.fadeOut(durasi);

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

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

Jika parameter tidak ditentukan - tidak akan ada animasi, elemen akan disembunyikan secara instan:

javascript.fadeOut();

Juga dapat meneruskan fungsi easing sebagai parameter kedua, dan callback function sebagai parameter ketiga - akan dijalankan setelah animasi selesai. Kedua parameter bersifat opsional:

javascript.fadeOut(durasi, [fungsi easing], [callback function]);

Dapat meneruskan berbagai opsi ke metode, dalam bentuk objek JavaScript, yang berisi pasangan kunci: nilai:

javascript.fadeOut(options);

Objek seperti itu dapat meneruskan parameter dan fungsi berikut - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Deskripsi parameter ini dapat Anda lihat untuk metode animate. Contohnya, mari kita atur durasi dan fungsi easing:

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

Contoh

Pada contoh berikut, ketika tombol #hide ditekan, elemen dengan #test akan disembunyikan menggunakan metode fadeOut, dan pada tombol #show - akan ditampilkan, dengan menggunakan fadeIn. Kami juga akan mengatur kecepatan menjadi 1000ms:

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').fadeIn(1000);
});

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

Contoh

Dan pada contoh berikut, setelah animasi selesai saat menampilkan elemen #test, kami akan menampilkan pesan dengan teks '!', dan saat menyembunyikan dengan teks '?':

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').fadeIn(1000, function() {
    alert('!');
  });
});

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

Lihat juga