Sabtu, 19 Mei 2018

Belajar jQuery : Callback Function dan Cara Menggunakannya


Codins - Sebelumnya kita telah belajar mengenai effect pada jquery yang bisa anda baca kembali pada artikel berjudul Belajar jQuery : Effect Pada jQuery dan Contoh Penggunaanya. Berikutnya kita akan belajar mengenai callback function pada jquery.

Secara singkat callback function pada jquery bisa diartikan sebagai function yang dieksekusi setelah sebuah effect selesai dijalankan. Misal kita akan membuat efek slideUp pada sebuah kotak, ketika efek pada kotak tersebut selesai dijalankan, maka berikutnya jquery akan menjalankan function yang sudah kita tentukan, ini dinamakan sebagai callback function.

Membuat Callback Function jQuery

Untuk membuat sebuah callback function pada jquery caranya cukup mudah, pertama buat sebuah file bernama callback.html kemudian anda isikan sintaks dibawah kedalam file tersebut : 

callback.html

Penjelasan sintaks diatas :

  • kita akan menampilkan gambar setelah kita menjalankan efek slideUp pada kotak berwarna biru
  • kita buat class gambar kemudian isikan css display : none untuk menyembunyikan gambar
  • setelah itu gunakan selector jquery untuk memilih button dengan id tombolshow, kemudian kita berikan event click pada tombol tersebut
  • selanjutnya kita berikan efek slideDown pada div class kotak, setelah efek dijalankan kita akan menampilkan tag img dengan class gambar


$('.kotak').slideDown(800,function(){
$('.gambar').show();
});
Pada sintaks yang saya garis bawahi diatas, jika kita ingin menggunakan callback function maka cara penulisannya adalah

$('.kotak').namaEfek(waktu dalam milisecond, function(){
//function yang akan dijalankan, misal menampilkan gambar
$('.gambar').show();
});
Jika anda berhasil maka hasilnya akan seperti berikut ini :

See the Pen bMoKRL by Memem (@inoorsetyo) on CodePen.



Sampai disini terlebih dulu tutorial berjudul Belajar jQuery : Callback Function dan Cara Menggunakannya. Semoga bermanfaat, terimakasih!

Related Posts

Belajar jQuery : Callback Function dan Cara Menggunakannya
4/ 5
Oleh