SeniKoding.com - Effect jQuery merupakan script yang digunakan untuk manipulasi elemen HTML yang telah dipilih menggunakan Selector, seperti menyembunyikan, menampilkan, menganimasikan, dan sebagainya. Effect jQuery ditulis setelah selector yang dipisahkan dengan tanda titik (.) dan diikuti tanda kurung ().Tanda kurung bisa diisi dengan pengaturan Effect jQuery tersebut atau bisa dikosongkan.
Belajar JQuery: Memahami Effect dalam jQuery
Format penulisan Effect jQuery seperti 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.SeniKoding.com.</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 adalah waktu dalam milidetik".
toggle() : Digunakan untuk menampilkan dan menyembunyikan elemen secara bergantian. Jika sebelumnya tampil, maka akan disembunyikan dan jika sebelumnya disembunyikan, maka akan ditampilkan.
Contoh: $('img').toggle().
fadeIn() : digunakan untuk menmpilkan elemen yang dipilih secara perlahan-lahan dengan lama waktu yang ditentukan.
Contoh: $('img').fadeIn('slow').
fadeOut() : digunakan untuk menyembunyikan elemen yang dipilih secara pelahan-lahan dengan lama waktu yang ditentukan.
Contoh: $('img').fadeOut(200) atau $('img').fadeOut('slow').
fadeTo() : diguanakan untuk membuat 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, seperti 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 jika sebelumnya ditampilkan, maka akan desmbunyikan dengan animasi naik.
Contoh: $('img').slideToggle().
animate(): digunakan untuk membuat animasi dengan cara mengubah style CSS yang ditulis didalam kurung.
Contoh: $('img').animate({top: '20px'},300).
clearQueue() : digunakan untuk menghapus antrean animasi yang dibuat dengan perintah animate().
delay() : digunakan untuk mengatur jeda antara dua animasi.
stop() : digunakan untuk menghentikan animasi yang sedang berjalan.
Anda bisa mencobanya sendiri dengan contoh kasus yang lain seperti efek jquery diatas.
Selamat mencoba, dan semoga bermanfaat untuk artikel Memahami Effect dalam jQuery ini.
belajar lebih banyak di www.jquery[dot]com.
Selanjutnya bisa belajar Memahami Event dalam jQuery.
- Salam -
Tidak ada komentar
Posting Komentar
Dilarang SPAM Komentar!