Kamis, 11 September 2014

JQuery onClick, toggleFade

Leave a Comment
Cara menggunakan fungsi onClick pada JQuery adalah sebagai berikut.

ELemen yang diklik
//perhatikan id yang digunakan 
<div id="klik">klik aku</div>
Tampilan/pesan ketika sudah diklik
//perhatikan id yang digunakan 
<div id="msg">Terimakasih telah berkenan menyentuhku</div>

Script JQuery onClick
//import file jQuery
<script type="text/javascript" src="sumber/jquery.js"></script>
<script type="text/javascript">
//agar jQuery bekerja ketika dokumen siap
$(document).ready(function(){
//menyembunyikan isi pesan 
$('#msg').hide();
//memberi event onclick pada id klik
$('#klik').click(function(){
//memberi tugas pada id msg agar tampil
$('#msg').fadeToggle(500);
});
});
</script>
Keterangan: fungsi fadeToggle digunakan untuk even ganda. Pada script ini, event (klik) pertama menampilkan isi pesan dengan animasi fade. event (klik) kedua menyembunyikan isi pesan dengan animasi fade.

Contoh
klik aku
Terimakasih telah berkenan menyentuhku

0 Komentar Anda:

Posting Komentar

Komentarlah yang baik.
Tujukkan Karakter Bangsa Indonesia.