JQuery Part 5 : Callback Function JQuery
CALLBACK FUNCTION JQUERY
Callback Function Pada Jquery adalah sebuah function yang dijalankan setelah sebuah effect dijalankan. Misalnya ketika sobat membuat sebuah effect dan sobat ingin membuat efek lagi ketika efek tersebut selesai dijalankan. Maka function yang selesai dijalankan ini disebut dengan callback function.
Untuk memperjelas tentang callback function JQuery akan saya berikan contoh. Disini saya membuat sebuah file html bernama index.html dan membuat file css yang saya namai style.css. Disini saya membuat efek fadeIn() dan setelah efek fadeIn tersebut dijalankan maka akan muncul efek baru
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar JQuery Part 5 : Callback Function</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Callback Function Pada JQuery<br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<button id="tombol">KLIK DISINI</button>
<div class="box"></div>
<div class="box2">Function Callback di Jalankan</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('.box').fadeIn(800,function(){
$('.box2').toggle();
});
});
});
</script>
</body>
</html>
style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
#tombol{
padding: 10px;
color: red;
background-color: transparent;
border: 1px solid red;
border-radius: 5px 5px 5px 5px;
}
#tombol:hover{
color: white;
background: red;
border-radius: 5px 5px 5px 5px;
-webkit-transform: scale(1.08);
}
.box{
height: 300px;
width: 300px;
background-color: cyan;
display: none;
}
.box2{
padding: 50px;
width: 400px;
display: none;
background: hotpink;
}
Dapat dilihat pada contoh diatas saya membuat sebuah tombol, sebuah element kotak yang saya beri nama box, dan kotak yang kedua yang saya beri warna pink. Kotak pink saya sembunyikan dengan css "display:none". Jadi untuk contoh pembuatan callback function ini saya membuat kotak box muncul setelah meng klik tombol, Dan ada lagi efek kedua sesudah memunuclkan box yang pertama inilah yang disebut dengan callback function.
KESIMPULAN
Dapat dilihat pada contoh callback function diatas kotak warna pink ditampilkan setelah efek fadeIn
$('#tombol').click(function(){Jadi yang disebut callback function ialah pemunculan kotak box pink setelah kotak box pertama dijalankan. Oke sampai sini saja penjelasan callback function JQuery. Sekian Terima Kasih
$('.box').fadeIn(800,function(){
$('.box2').toggle();
});
});
Tidak ada komentar :
Posting Komentar