Fade In dan Fade Out dengan JQuery

Posted on 14. Dec, 2009 by Cheyuz in Tutorial, jquery

OK, sesuai janji… (walopun bilangnya udah beberapa hari yang lalu).. Cheyuz bakal ngebahas tentang JQuery lanjutan…

Waktu di postingan kemaren kan kita udah mengenal JQuery itu apa, dan udah dikasi contoh cara menyembunyikan sebuah gambar di html gimana,,, dan itu pun sangat sangat dasar…

OK, kali ini kita akan mencoba memakai fungsi Jquery untuk menampilkan dan menyembunyikan suatu gambar dengan event tombol yang udah kita set supaya klo tombol itu ditekan, maka fungsi akan dijalankan… dan kita akan mengenal Fade In dan Fade Out, yaitu membuat gambar tampil secara halus (dari transparan hingga opacity) dan Fade Out adalah sebaliknya (dari ada menjadi tiada secara halus)…

Hal pertama yang perlu kita lakukan adalah menambahkan script buat nge-load JQuery, silakan liat postingan sebelumnya untuk meliat gimana caranya ngeload JQuery, klik di sini

Klo udah dipasang, kita tinggal membuat elemen img (gambar) di bagian tag body, misalnya nama gambarnya adalah “foto.jpg” dan beri atribut id=”foto” untuk memberikan ID buat elemen tersebut, maka kode html dibuat seperti berikut..

...
<body>
  <img id="foto" src="foto.jpg" />
</body>

Kemudian buatlah 2 tombol (button) masing-masing dengan label “Sembunyikan”, dan satunya lagi “Munculkan”… ID dari masing-masing tombol berturut-turut adalah “sembunyi” dan “muncul”, jadi kode htmlnya menjadi sebagai berikut:

...
<body>
  <img id="foto" src="foto.jpg" />
  <button id="sembunyi">Sembunyikan</button>
  <button id="muncul">Munculkan</button>
</body>

Nah, kita sekarang udah bikin 3 komponen yang aku rasa udah cukup buat tutorial ini… masing-masing udah punya ID, yaitu foto, sembunyi, dan muncul. Sekarang kita tinggal kasi Jquery..

Pertama, kita akan menyembunyikan gambar tersebut dengan menekan tombol “sembunyi”, jadi kita tinggal menambahkan script berikut di atas gambar (sebelum komponen di buat) seperti ini:

...
<body>
<script>
$().ready(function(){
  $("#sembunyi").click(function(){
    $("#foto").fadeOut("fast");
  });
});
</script>
 
<img id="foto" src="foto.jpg" />
...

di situ ada suatu fungsi dari objek yang mempunyai id=”gambar” yaitu fadeOut, fadeOut adalah suatu fungsi di mana si objek/elemen yang bersangkutan akan disembunyikan dengan berangsur-angsur hilang (dengan menurunkan opacitynya).. temen2 juga bisa berkreasi dengan mengubah parameter “fast” menjadi “slow”, supaya si gambar menghilang dengan pelan dan berangsur-angsur…

Nah, setelah kita menghilangkan si gambar, tentunya temen2 pengen supaya si gambar itu muncul kembali dan dengan berangsur2 pula…
OK, caranya kita tambahkan script yang tadi menjadi kayak gini…

...
<body>
<script>
$().ready(function(){
  $("#sembunyi").click(function(){
    $("#foto").fadeOut("fast");
  });
  $("#muncul").click(function(){
    $("#foto").fadeIn("fast");
  });
});
</script>
 
<img id="foto" src="foto.jpg" />
...

Fade In, berarti kebalikan dari Fade Out, yaitu memunculkan kembali gambar dengan berangsur-angsur (menaikkan opacity), jadi script/kode lengkapnya kayak gini….

<html>
<head>
  <title>Fade In Fade Out</title>
  <script src="jquery.js"></script>
</head>
<body>
  <script>
  $().ready(function(){
    $("#sembunyi").click(function(){
      $("#foto").fadeOut("fast");
    });
    $("#muncul").click(function(){
      $("#foto").fadeIn("fast");
    });
  });
  </script>
 
  <img id="foto" src="foto.jpg" />
  <button id="sembunyi">Sembunyikan</button>
  <button id="muncul">Munculkan</button>
</body>
</html>