Memahami Effect Dalam Jquery
- Effect jQuery merupakan script yang digunakan untuk manipulasi elemen HTML yang telah dipilih memakai Selector, menyerupai menyembunyikan, menampilkan, menganimasikan, dan sebagainya. Effect jQuery ditulis sesudah selector yang dipisahkan dengan tanda titik (.) dan diikuti tanda kurung ().Tanda kurung dapat diisi dengan pengaturan Effect jQuery tersebut atau dapat dikosongkan.
Belajar JQuery: Memahami Effect dalam jQuery
Format penulisan Effect jQuery menyerupai berikut ini:
$('selector').effect()
Contoh Effect Hide/Show JQuery:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>Belajar Hide/Show jQuery bersama www..</p> <button id="hide">Hide</button> <button id="show">Show</button> </body> </html> Hasil browser Hide/Show jQuery:
Beberapa Effect jQuery yang sering dipakai:
hide() : Yang artinya digunakan untuk menyembunyikan elemen yang dipilih oleh selector.
Contoh: $('img').hide('slow').
show() : Digunakan untuk menampilkan kembali elemen yang disembunyikan dengan effect hide().
Contoh: $('img').show(200) atau $('img').show('slow'). "200 yakni waktu dalam milidetik".
toggle() : Digunakan untuk menampilkan dan menyembunyikan elemen secara bergantian. Jika sebelumnya tampil, maka akan disembunyikan dan jikalau sebelumnya disembunyikan, maka akan ditampilkan.
Contoh: $('img').toggle().
fadeIn() : digunakan untuk menmpilkan elemen yang dipilih secara perlahan-lahan dengan usang waktu yang ditentukan.
Contoh: $('img').fadeIn('slow').
fadeOut() : digunakan untuk menyembunyikan elemen yang dipilih secara pelahan-lahan dengan usang waktu yang ditentukan.
Contoh: $('img').fadeOut(200) atau $('img').fadeOut('slow').
fadeTo() : diguanakan untuk menciptakan animasi menuju tingkat transparan tertentu sesuai angka yang dituliskan didalam kurung.
Contoh: $('img').fadeTo('slow',0.5).
fadeToggle() : digunakan untuk menampilkan dan menyembunyikan elemen yang dipilih, menyerupai perintah toggle(), tetapi dengan animasi fade.
Contoh: $('img').fadeToggle('slow').
slideDown() : digunakan untuk menampilkan elemen yang dipilih dengan animasi turun.
Contoh: $('img').slideDown().
slideUp() : digunakan untuk menyembunyikan elemen yang dipilih dengan animasi naik.
Contoh: $([img').slideUp().
slideToggle() : digunakan untuk menampilkan dan menyembunyikan elemen yang dipilih secara bergantian, naik dan turun. Jika sebelumnya disembunyikan, maka akan ditampilkan dengan animasi turun. Dan jikalau sebelumnya ditampilkan, maka akan desmbunyikan dengan animasi naik.
Contoh: $('img').slideToggle().
animate(): digunakan untuk menciptakan animasi dengan cara mengubah style CSS yang ditulis didalam kurung.
Contoh: $('img').animate({top: '20px'},300).
clearQueue() : digunakan untuk menghapus antrean animasi yang dibentuk dengan perintah animate().
delay() : digunakan untuk mengatur jeda antara dua animasi.
stop() : digunakan untuk menghentikan animasi yang sedang berjalan.
Anda dapat mencobanya sendiri dengan pola kasus yang lain menyerupai efek jquery diatas.
Selamat mencoba, dan supaya bermanfaat untuk artikel Memahami Effect dalam jQuery ini.
mencar ilmu lebih banyak di www.jquery[dot]com.
Selanjutnya dapat mencar ilmu Memahami Event dalam jQuery.
- Salam -