Menggabungkan Fungsi delay dan fadeIn jQuery
Selamat datang di situs tips dan trik Source Code Aplikasi, kembali lagi dengan saya pada tips dan trik seputar dunia situs. Di kesempatan kali ini saya akan memberikan tips dan trik mengenai Menggabungkan Fungsi delay dan fadeIn jQuery dimana kita akan menggabungkan kedua guna tersebut pada satu tampilan. Apa itu guna delay() dan apa itu guna fadeIn()..??
Manfaat delay() adalah sebuah pemberian jarak atau jeda yang bertujuan bagi menolong menghasilkan efek ke guna lainnya “pada kasus kali ini kita hubungkan dengan fadeIn()”
Manfaat fadeIn() lebih tepatnya bagi menampilkan content yang tersembunyi, di kasus ini kita gabungkan bagi menerima efek dari delay() kemudian akan di proses oleh fadeIn()
Baiklah, berikut ialah penjelasan sedikit mengenai guna delay() dan fadeIn() langkah berikutnya kita akan seketika saja implementasikan judul artikel kali ini mengenai Menggabungkan Fungsi delay dan fadeIn jQuery seperti biasanya teman – teman siapkan text editornya lalu ketikkan script html nya atau dapat copy di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Menggabungkan Manfaat 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 hingga p5 yang akan kita berikan guna delay() dan fadeIn(), anggap saja latihan kita kali ini merancang sebuah list nama interaktiv. Kemudian kita berikan css nya bagi 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 pada delay saya berikan nilai 500 dan terus ditambahkan 500 hingga 2500, ini bertujuan setiap id akan tampil sesuai urutan dan mempunyai jeda setengah detik bagi tampil berikutnya, kemudain guna fadeIn() akan menampilkan tag p yang kita sembunyikan dengan css nya. Dengan kombinasi kedua guna ini akan menghasilkan list nama yang interaktive.
Tentu betul-betul gampang sekali bukan, bagus demikian di tips dan trik kali ini mengenai Menggabungkan Fungsi delay dan fadeIn jQuery. Kita kembali lagi di artikel yang akan datang, terimakasih dan hingga jumpa.
Semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
