Cara menggunakan .FADEIN pada JavaScript

Hallo teman-teman bertemu lagi pada tutorial dumet school, pada tutorial kali ini saya akan sharing tentang bagaimana cara membuat efek fadein dan fadeout sederhana dengan jquery.

Fadein dan fadeout pada dasarnya sama seperti show dan hide pada jquery, yang berfungsi untuk menampilkan dan menyembunykan element html yang ada pada browser, untuk lebih jelasnya kita langsung saja praktek, pertama-taman teman-teman silahkan buat sebuah file dan ketikan script berikut ini:

<!doctypeHTML>

<html>

<head>

<title>belajareventfadeto</title>

</script>

</head>

<body>

<button id="out">fadeout</button>

<h2>HalosayaFahrizal</h2>

$(document).ready(function(e){

$("#out").click(function(){

$("h2").fadeOut("slow");

});

$("#in").click(function(){

$("h2").fadeIn("slow");

});

</script>

</body>

</html>

Saya membuat 2 buah tombol yang saya berikanÂ id in dan out, lalu saya membuat fungsi seperti ini pada jquerynya :

$(document).ready(function(e){

$("#out").click(function(){

$("h2").fadeOut("slow");

});

$("#in").click(function(){

$("h2").fadeIn("slow");

});

</script>

Dimana saya memberikan efekÂ fade in dan fade out slow pada masing-masing idnya, dan yang terpenting jangan lupa teman-teman mereload liblary dari jquerynya, seperti script ini :

Diletakan di dalam tag head yang diambil dari jquery.com, jika sudah teman-teman save dan lihat hasilnya,

Hasilnya tulisan h2 adan menghilang dan tampil ketikan tombol kita klik,

Gimana teman-teman? cukup mudah bukan? oke untuk tutorial kali ini tentang membuat efek fadein dan fadeout sederhana dengan jquery cukup sampai disini dulu, semoga tutorial kali ini bermanfaat untuk teman-teman semuanya, sampai bertemu pada tutorial berikutnya,

Terimakasih.

Apa perbedaan Fade In dan fadeOut jQuery?

Oke Effect FadeIn itu sendiri berfungsi untuk memunculkan suatu element html dengan durasi tertentu, dan sebaliknya effect fadeOut adalah untuk menghilangkan suatuelement dengan durasi tertentu.

Apa fungsi fadeOut pada jQuery?

Method fadeToggle() jQuery Sama seperti efek “toggle” yang kita pelajari sepanjang tutorial jQuery ini, fungsi dari fadeToggle() adalah secara bergantian memunculkan dan menyembunyikan element HTML, tergantung kondisi element saat ini.