Membuat Animasi Form Dengan JQuery – Halo teman-teman malasngoding.com. terima kasih sebelumnya saya ucapkan ke pada teman-teman pembaca setia di malasngoding.com. karena telah meluangkan waktu untuk berkunjung di blog yang sederhana ini untuk sama-sama dengan saya belajar bahasa pemrograman web khususnya.
Di kesempatan kali ini, melalui artikel yang berjudul “Membuat Animasi Form Dengan JQuery“, kita akan belajar tentang pengulahan fungsi-fungsi jquery yang sebelumnya telah kita pelajari. silahkan teman-teman lihat pada tutorial sebelumnya tentang tutorial jquery dasar yang sudah di jelaskan. pada tutorial sebelumnya kita telah belajar fungsi event pada jquery dan fungsi-fungsi lainnya. untuk lebih mengasah tentang penggunaan fungsi jquery dasar ini, kita akan mencoba untuk membuat effect animasi sederhana pada form html.
kemudian kita buat form. perhatikan. kita berikan masing-masing dengan id yang berbeda. untuk membedakan satu form dengan form yang lainnya pada saat pengaksesan menggunakan jquery nantinya.
1
2
3
4
5
<form>
<input type="text"id="nama"placeholder="Masukkan nama .."name="nama"autocomplete="off">
nah, di sini yang kita tampilkan hanya form nama. form alamat dan form pekerjaan kita sembunyikan dulu dengan css. perhatikan css di atas tadi. di mana kita membuat display:none pada id alamat dan pekerjaan. agar tidak di tampikan.
1
2
3
#alamat,#pekerjaan{
display:none;
}
dan akan saya jelaskan pada bagian javascript nya.
1
2
3
4
5
6
7
8
$(document).ready(function(){
$("#nama").keyup(function(){
$("#alamat").slideDown();
});
$("#alamat").keyup(function(){
$("#pekerjaan").fadeIn();
});
});
di sini kita berikan event pada id nama. jika terjadi pengetikan pada form nama, maka form alamat akan di tampilkan dengan effect slidedown(). baca tentang tutorial effect pada jquery.
dan jika form nama di ketik maka form pekerjaan akan di tampilkan dengan effect fadeIn(). teman-teman bisa sesuaikan sendiri effect jquery yang mana yg ingin teman-teman gunakan.
Berikut ini adalah hasil Membuat Animasi Form Dengan JQuery nya.
membuat effect animasi pada form dengan jquery
pada saat form nama di ketik, maka form alamat muncul
membuat animasi pada jquery
dan pada saat form alamat di ketik, maka form pekerjaan pun muncul.
contoh menggunakan effect jquery pada form
dan silahkan teman-teman coba hasilnya pada demo berikut ini. Membuat Animasi Form Dengan JQuery
sekian lah tutorial Membuat Animasi Form Dengan JQuery. semoga dapat bermanfaat.
Diki Alfarabi Hadi
Coding enthusiast.
Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Halo teman-teman, selamat datang di tutorial Membuat Pencarian Tanpa Reload Dengan PHP Dan Ajax JQuery. Pada tutorial sebelumnya di malasngoding.com, teman-teman sudah belajar membuat pencarian ...
Membuat Halaman Web Ajax Tanpa Reload dengan JQuery – Halo teman-teman. sebelumnya saya ucapkan dulu terima kasih sudah kembali berkunjung di www.malasngoding.com. Sesuai dengan judul ...
Show Hide Form Password Dengan JQuery Show Hide Form Password Dengan JQuery – Mungkin teman-teman ada yang masih bingung dengan judul tutorial kali ini, yaitu Show ...
Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin – halo teman-teman malasngoding.com yang mudah-mudahan gak malas ngoding ...
kalau seandainya ketika diisi angka 1 maka yng keluar hanya masukan email dan ketika diisi 2 maka yng keluar masukan email dan pekerjaan ? mohon pencerahan
Download Ebook belajar HTML & CSS dasar untuk pemula gratis.
Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana.
materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.
kalau seandainya ketika diisi angka 1 maka yng keluar hanya masukan email dan ketika diisi 2 maka yng keluar masukan email dan pekerjaan ? mohon pencerahan