Cara Sederhana Menggabungkan Fungsi dblclick dan fadeIn jQuery
Halo teman – teman selamat datang kembali di tips dan trik Source Code Aplikasi, oke berjumpa kembali dengan saya yang akan selalu memberikan tips dan trik kepada teman – teman pastinya seputar dunia situs. Dan di situs ini kita pun dapat sama – sama sharing mengenai beberapa masalah kecil yang sering kita alamai pada proses perancangan situs native. Di kesempatan kali ini kita saya akan memberikan tips mengenai Cara Sederhana Menggabungkan Fungsi dblclick dan fadeIn jQuery dimana kedua manfaat ini akan kita gabungkan bagi menghasilkan tampilan. Di latihan kali ini kita akan merancang dengan case yang sederhana terlebih dahulu jikalau dirasa teman – teman telah memahami betul baru ketahap yang lebih intens lagi.
Latihan kita kali ini merancang sebuah text dan kemudian ketika text tersebut double klik karenanya image banner akan muncul, nah ini kolaborasi antara jQuery dan css, seperti yang teman – teman lihat di gambar di bawah ini
Kalau di klik 2 kali karenanya banner akan muncul dan background text akan berubah
Bagus seketika saja kita implementasikan Cara Sederhana Menggabungkan Fungsi dblclick dan fadeIn jQuery seperti lazimnya siapkan text editornya dan siapkan gambar apa saja. Kemudian ketikkan script html nya di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>dblclick demo</title>
</head>
<body>
<p>Klik 2 x bagi menampilkan gambar</p>
<img src=img.png>
</body>
</html>
Kemudian kita berikan css nya bagi mengatur text dan hidden image yang nanti kita akan tampilkan dengan menggunakan .fadeIn()
.dbl { background: yellow;}
p{cursor: pointer;}
img{display: none;}Berikutnya kita load terlebih dahulu link jQuery nya
https://code.jquery.com/jquery-1.10.2.js
Dan berikan script jQuery nya
var double = $( p );
double.dblclick(function() {
double.toggleClass( dbl);
$(img).fadeIn(5000);
});
Kalau telah save dengan nama index.html lalu jalankan di browsernya, jikalau telah tampil teman – teman klik 2x. Karenanya jikalau berhasil banner akan muncul setelah di double klilk
Ini seluruh yakni manfaat dari dnclick dan fadeIn, pada penjelasan script jQuery nya
pertama-tama di bikin terlebih dahulu variable double kemudian akan di proses oleh dbclick yang didalamnya mempunyai manfaat toggleClass bagi memanggil class yang terdapat di css yaitu class dbl atau (.dbl) kemudain jikalau telah di eksekusi fadeIn akan menampilkan image yang di display none. Karenanya hingga disini eksekusi berhasil, bagaimana..??
Amat gampang bukan, bagus sekianlah di artikel kali ini mengenai Cara Sederhana Menggabungkan Fungsi dblclick dan fadeIn jQuery kita berjupa kembali di lain kesempatan.’
Terimakasih dan hingga jumpa, semoga bermanfaat.
Sumber https://kursuswebsite.org
