Cara Membuat Fade Out dengan jQuery

Tak ada kata terlambat untuk berubah. Masa lalu hanyalah pendewasaan dirimu. Hidupmu tak ditentukan oleh orang lain tapi kamu! Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Fade Out dengan jQuery.

Jika pada tutorial sebelumnya saya membuat Cara Membuat Fade in dengan jQuery yang fungsi nya untuk membuat efek animasi seperti tadinya tidak ada di browser kemudian dengan perlahan objek nya muncul, nah sekarang adalah kebalikan nya teman-teman. Saya akan memberitahukan kepada kalian tentang bagaimana Cara Membuat Fade Out dengan jQuery. Oke langsung saja, berikut cara nya.

Seperti biasa, pertama-tama silahkan teman-teman buat terlebih dahulu file index.html nya.

Kemudian ketikkan di tag <head> library jquery nya,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Lalu isi di dalam tag <body> tag-tag berikut,

<p>This is a paragraph.</p>

<button class="btn1">Fade out</button>

Dan yang terakhir silahkan isi script nya di tag <head>,

<script>
$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").fadeOut()
    });
});
</script>

Bagaimana teman-teman? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Fade Out dengan jQuery.

Semoga bermanfaat, terima kasih

Kategori