Cara Sederhana Menggabungkan Fungsi dblclick dan fadeIn jQuery

Halo teman – teman selamat datang kembali pada tips dan trik Dumet School, oke berjumpa kembali dengan saya yang akan selalu memberikan tips dan trik kepada teman – teman tentunya seputar dunia website. Dan di website ini kita juga bisa sama – sama sharing tentang beberapa masalah kecil yang sering kita alamai dalam proses pembuatan website native. Pada kesempatan kali ini kita saya akan memberikan tips tentang Cara Sederhana Menggabungkan Fungsi dblclick dan fadeIn jQuery dimana kedua fungsi ini akan kita gabungkan untuk menciptakan tampilan. Di latihan kali ini kita akan membuat dengan case yang sederhana terlebih dahulu jika dirasa teman – teman sudah memahami betul baru ketahap yang lebih intens lagi.

Latihan kita kali ini membuat sebuah text dan kemudian ketika text tersebut double klik maka image banner akan muncul, nah ini kolaborasi antara jQuery dan css, seperti yang teman – teman lihat pada gambar di bawah ini

Jika di klik 2 kali maka banner akan muncul dan background text akan berubah

Baik langsung saja kita implementasikan Cara Sederhana Menggabungkan Fungsi dblclick dan fadeIn jQuery seperti biasa 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 untuk menampilkan gambar</p>
 <img src="img.png">
</body>
</html>

Kemudian kita berikan css nya untuk 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);
});

Jika sudah save dengan nama index.html lalu jalankan pada browsernya, jika sudah tampil teman – teman klik 2x. Maka jika berhasil banner akan muncul setelah di double klilk

Ini semua adalah fungsi dari dnclick dan fadeIn, dalam penjelasan script jQuery nya

pertama di buat terlebih dahulu variable double kemudian akan di proses oleh dbclick yang didalamnya memiliki fungsi toggleClass untuk memanggil class yang ada di css yaitu class dbl atau (.dbl) kemudain jika sudah di eksekusi fadeIn akan menampilkan image yang di display none. Maka sampai disini eksekusi berhasil, bagaimana..??

Sangat mudah bukan, baik sekian pada artikel kali ini tentang Cara Sederhana Menggabungkan Fungsi dblclick dan fadeIn jQuery kita berjupa kembali di lain kesempatan.’

Terimakasih dan sampai jumpa, semoga bermanfaat.