Belajar JQuery Part 5 : Callback Function Pada JQuery
Belajar JQuery Callback Function Pada JQuery
Callback function pada JQuery adalah sebuah function yang dijalankan setelah effect selesai di jalankan. misalnya pada saat anda menjalanka sebuah effect, dan anda ingin menjalankan sebuat function lagi setelah effect selesai di jalankan. maka function yang di jalankan setelah selesai menjalankan effect di sebut dengan callback function.
Untuk lebih memperjelas pemahaman tentang apa itu callback function pada jquery, akan saya buatkan sebuah contoh. misalnya pada contoh ini kita akan menggunakan sebuah effect jquery, sebut saja effect fadeIn(). dan setelah effect fadeIn() selesai di jalankan oleh browser maka akan kita jalankan effect atau function lainnya.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>Tutorial belajar JQuery Part 5 : Callback Function Pada JQuery</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 | www.malasngoding.com</h1> <button id="tombol">KLIK</button> <div class="box"></div> <div class="kotak_biru">function callback di jalankan</div> </body> <script type="text/javascript"> $(document).ready(function(){ $('#tombol').click(function(){ $('.box').fadeIn(800,function(){ $('.kotak_biru').show(); }); }); }); </script> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
body{ font-family: sans-serif; } h1{ text-align: center; } .box{ height: 300px; width:300px; background: orange; display: none; } #tombol{ padding:10px; color: #fff; background: #34495E; border: none; } .kotak_biru{ padding:50px; width: 400px; display: none; background: blue; } |
dapat di lihat pada contoh di atas kita membuat sebuah tombol, sebuah element kotak yang kita beri class box, dan sebuah kotak lagi yang berwarna biru yang kita beri warna biru. kotak biru kita setting dengan di sembunyikan dengan css. jadi untuk contoh callback function ini kita akan membuat kotak box muncul setelah tombol di klik. dan setelah effect yang memunculkan kotak box selesai selanjutnya akan di sambung dengan memunculkan kotak biru. jadi yang di sebut sebagai callback function di sini ialah pada pemunculan kotak biru setelah effect yang menampilkan kotak box selesai di jalankan.
belajar jquery mengenal callback function pada jquery
See the Pen JGErYP by Malas Ngoding (@malasngoding) on CodePen.0
dapat di lihat pada contoh callback function di atas kotak biru di tampilkan setelah effect yang menampilkan kotak box selesai.
|
1 2 3 4 5 |
$('#tombol').click(function(){ $('.box').fadeIn(800,function(){ $('.kotak_biru').show(); }); }); |
function callback di dalam function effect seperti penulisan di atas. sekian tutorial belajar jquery callback function pada jquery.
Tutorial Menarik Lainnya
Membuat Pencarian Tanpa Reload Dengan PHP Dan Ajax JQuery
Membuat Halaman Web Ajax Tanpa Reload dengan JQuery
Show Hide Form Password Dengan JQuery
Membuat Animasi Form Dengan JQuery
