Tutorial Lengkap JQuery .fadeIn(), .fadeOut(), .fadeTo() dan .fadeToggle()

.fadeIn() digunakan untuk memunculkan objek yang tersembunyi dengan menciptakan efek kenaikan tigkat transparasi.
.fadeOut() digunakan untuk mnyembunyikan objek yang tampil dengan menciptakan efek penurunan tigkat transparasi hingga pada akhirnya menghilang total (display:none).
.fadeToggle() adalah gabungan antara efek .fadeIn() dan .fadeOut(). Jadi, saat elemen sedang menghilang, maka .fadeToggle() bertugas untuk menampilkannya, sedangkan saat elemen sedang tampil, maka .fadeToggle() bertugas untuk menyembunyikannya.
.fadeTo() memungkinkan kita untuk menciptakan penurunan tingkat transparasi sampai pada titik tertentu tanpa harus menghilangkan elemen layaknya menggunakan efek .fadeOut()

Penulisan Secara Umum

$(sasaran).fadeIn(durasi);
$(sasaran).fadeOut(durasi);
$(sasaran).fadeToggle(durasi);
$(sasaran).fadeTo(durasi, opacity);

Sasaran: adalah objek yang akan dikenai perintah
Durasi: adalah kecepatan aksi. Nilainya bisa berupa milidetik (misal: 1500, 2000) atau 'slow', 'normal' dan 'fast'
Opacity: variabel untuk menentukan tingkat transparasi akhir. Nilai opacity/transparasi dimulai dari 0 sampai 1 (misal: 1, 0.4, 0.7).

Kerangka

<button class="hilang">Hilang!</button>
<button class="muncul">Muncul!</button>
<button class="fd-to">FadeTo 0.5</button>
<button class="fd-to1">Reset</button>
<div id="target"></div>

CSS

body {padding:30px;}

#target {
  background:rgb(37, 42, 61);
  margin-bottom:15px;
  height:200px;
  padding:5px;
}

Deklarasi JQuery

$('.hilang').click(function() {
    $('#target').fadeOut('normal');
});

$('.muncul').click(function() {
    $('#target').fadeIn('normal');
});

$('.fd-to').click(function() {
    $('#target').fadeTo('fast', 0.5);
});

$('.fd-to1').click(function() {
    $('#target').fadeTo(1000, 1);
});

Lebih lengkap silahkan download materi

***********************************

Tombol Download. Prosedur khusus untuk pengguna facebook. Karena harus klik LIKE4 tombol ini >> untuk memulai. Link Hanya Untuk Kalangan Sendiri.

.

Berikut adalah tombol no.1 sampai 6 silahkan anda klik, Pada tab baru silahkan anda pencet Download/Play. Dan ikuti alurnya.

Tombol 1 Untuk memulai:

Tombol 2 Untuk memulai:

Tombol 3 Untuk memulai:

Tombol 4 Untuk memulai:

Tombol 5 Untuk memulai:

Tombol 6 Untuk memulai:

Sekian informasi yang bisa Cool August sampaikan semoga bermanfaat. Sebelum mengakhri postingan kali ini, saya ada pantun nih buat pembaca setia.

Hati gembira bersama teman
Bersuka ria di atas awan
Jikalau ada kesempatan
Pasti bertemu dihari kemudian

Terima Kasih atas kunjungannya ya kawan ^_^