Advertisement
Advertisement
Dari effect ini juga ada kaitanya dengan Selector, Apa itu Selector ?, silahkan baca di postingan sebelumnya yang berjudul Memahami apa itu Selector pada JQuery .
Effect merupakan skrip JQuery yang digunakan untuk memanipulasi elemen HTML yang telah dipilih menggunakan selector, seperti efek menyembunyikan, menampilkan, dan animasi lainya .
Effect ditulis setelah selector yang dipisahkan dengan tanda titik (.) dan diikuti tanda kurung. Tanda kurung bisa diisi dengan pengaturan effect tersebut atau bisa dikosongkan . Format penulisan effect adalah sebagai berikut :
$("selector").effect();
Beberapa effect JQuery yang sering dipakai beserta penjelasanya dapat dilihat pada tabel berikut :
hide() => Digunakan untuk menyembunyikan suatu elemen HTML yang dipilih oleh selector, contohnya sebagai berikut :
$("img").hide('slow'); // di ikuti timing
show() =>Digunakan untuk menampilkan kembali elemen yang telah disembunyikan sebelumnya dengan Effect hide(). Berikut contohnya :
$("").show(300); // di ikuti timing
toggle() =>Ini merupakan effect menampilkan dan menyembunyikan sebuah elemen, dalam kata lain merupakan gabungan dari hide() dan show(), contoh kode :
$("img").toggle('fast');
fadeTo() => Digunakan untuk menyembunyikan elemn yang dipilih secara perlahan - lahan dengan lama waktu yang ditentukan .
fadeTo() =>Digunakan untuk membuat animasi menuju tingkat transparan tertentu sesuai angka yang dituliskan di dalam kurung, Sebagai contoh :
$().fadeTo('slow','0.4'); // pada 0.4 bisa diganti dengan tingkat transparant yang diinginkan .
fadeToggle() => Digunakan untuk membuat animasi seperti toggle() dan slideToggle(), tetapi yang membuat berbeda adalah saat menyembunyikan dan menampilkan akan diselarasikan dengan efek fade();
slideDown() => Digunakan untuk menampilkan elemen yang dipilih engna animasi turun.
SlideUp() => Digunakan untuk menyembunyikan sebuah elemen yang dipilih dengan animasi naik.
slideToggle() => Menampilkan dan menyembunyikan elemen yang dipilih secara bergantian. Jika sebelumnya disembunyikan, maka akan ditempilkan dengan animasi turun, dan jika sebelumnya ditampilkan, maka akan disembunyikan dengan animasi naik .
animate() => Fungsinya membuat animasi dengan cara mengubah sebuah style CSS yang ditulis di dalam kurung, Berikut contohnya :
$("img").animate({top:'20px'},300);
clearQueue() => Digunakan untuk menghapus sebuah antrian animasi yang dibuat dengan perintah animate() .
delay() => Digunakan untuk mengatur jeda antara dua animasi .
.stop() => Digunakan untuk menghentikan animasi yang sedang berjalan .
Penulisan kodenya semua sama, kita hanya memilih elemen ( Selector ), lalu kita menambahkan sebuah effect keren JQuery ini .
Itulah beberapa effect pada JQuery yang mungkin bisa menambah cantik sebuah halaman website yang anda kelola sekarang,
Semoga bermanfaat .
Advertisement
Advertisement