Memahami dan mencoba beberapa Effect JQuery

Advertisement

Advertisement

 

 

            Efek yang menawan dari JQuery membuat para web developer bagian front end akan terkesima akan hal tersebut, banyak efek - efek yang menarik yang harus anda coba dan terapkan .

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