Selamat datang di website tips dan trik Dumet School, kembali lagi dengan saya dalam tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips dan trik tentang Menggabungkan Fungsi delay dan fadeIn jQuery dimana kita akan menggabungkan kedua fungsi tersebut dalam satu tampilan. Apa itu fungsi delay() dan apa itu fungsi fadeIn()..??
Fungsi delay() merupakan pemberian jarak atau jeda yang bertujuan untuk membantu menciptakan efek ke fungsi lainnya “dalam kasus kali ini kita hubungkan dengan fadeIn()”
Fungsi fadeIn() lebih tepatnya untuk menampilkan content yang tersembunyi, pada kasus ini kita gabungkan untuk menerima efek dari delay() kemudian akan di proses oleh fadeIn()
Baiklah, berikut adalah penjelasan sedikit tentang fungsi delay() dan fadeIn() langkah berikutnya kita akan langsung saja implementasikan judul artikel kali ini tentang Menggabungkan Fungsi delay dan fadeIn jQuery seperti biasa teman – teman siapkan text editornya lalu ketikkan script html nya atau bisa copy di bawah ini
<!DOCTYPE html> <html> <head> <title>Menggabungkan Fungsi delay dan fadeIn jQuery</title> </head> <body> <button>Tampilkan</button> <p id="p1">Hernowo</p> <p id="p2">Fahrul</p> <p id="p3">David</p> <p id="p4">Very</p> <p id="p5">Robani</p> </body> </html>
Kemudian save dengan nama index.html, langkah berikutnya kita load terlebih dahulu library jQuery nya
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Seperti yang teman – teman lihat di setiap tag p saya berikan id p1 sampai p5 yang akan kita berikan fungsi delay() dan fadeIn(), anggap saja latihan kita kali ini membuat sebuah list nama interaktiv. Kemudian kita berikan css nya untuk menyembunyikan tag p
p{display:none}
Kita tambahkan script jQuery nya
$(document).ready(function(){
$("button").click(function(){
$("#p1").delay(500).fadeIn();
$("#p2").delay(1000).fadeIn();
$("#p3").delay(1500).fadeIn();
$("#p4").delay(2000).fadeIn();
$("#p5").delay(2500).fadeIn();
});
});
Di dalam delay saya berikan nilai 500 dan terus ditambahkan 500 sampai 2500, ini bertujuan setiap id akan tampil sesuai urutan dan memiliki jeda setengah detik untuk tampil selanjutnya, kemudain fungsi fadeIn() akan menampilkan tag p yang kita sembunyikan dengan css nya. Dengan kombinasi kedua fungsi ini akan menghasilkan list nama yang interaktive.
Tentu sangat mudah sekali bukan, baik sekian pada tips dan trik kali ini tentang Menggabungkan Fungsi delay dan fadeIn jQuery. Kita kembali lagi pada artikel yang akan datang, terimakasih dan sampai jumpa.
Semoga bermanfaat 
The post Menggabungkan Fungsi delay dan fadeIn jQuery appeared first on Kursus Website Terbaik.