Binti Qomariah - Assalamu'alaikum sobat,
Hari ini kita akan membuat form yang kemudian nanti akan diberi efek animasi berupa keyup. Seperti apa sih jadinya?. Dan keyup sendiri fungsinya apa sih ?. Untuk lebih lanjutnya, yuk langsung saja kita buat.
PENGERTIAN
Animasi JQuery adalah sebuah objek yang diberikan efek menggunakan JQuery agar lebih hidup dan lebih indah.
LATAR BELAKANG
Ingin mengetahui perbedaan pembuatan animasi melalui CSS dan melalui JQuery.
MAKSUD DAN TUJUAN
Membedakan pembuatan animasi melalui CSS dan melalui JQuery.
HASIL YANG DIHARAPKAN
Dapat membuat animasi menggunakan JQuery beserta perbedaannya dengan CSS.
URAIAN KEGIATAN
Kali ini kita akan membuat animasi menggunakan JQuery. Dan menggunakan function Keyup. Untuk proses pembuatannya, bisa disimak seperti yang dibawah ini :
Pertama, kita buat file index.php. Kemudian panggil file-file yang dibutuhkan dalam pembuatan animasi menggunakan JQuery tersebut. File-file tersebut adalah jquery.min.js. Dan jika kita ingin menambahkan icon bawaan bootstrap (glyphicon), kita bisa menambahkan file bootstrap yaitu bootstrap.min.css bootstrap.css dan bootstrap.js. Tetapi disini saya tidak menggunakan icon bootstrap.
Kedua, didalam tag <body> </body> kita tambahkan script seperti dibawah ini :
Ketiga, masih didalam tag <body> </body> kita tambahkan script function JQuery seperti dibawah ini :
Disini saya menggunakan function animasi Keyup. Keyup ini berfungsi untuk menampilkan form atau teks yang terhiden atau terdisplay.
Kemudian di dalam tag <head> </head> tambahkan tag <style> </style> dan didalam tag tersebut kita isikan css yang berisi display untuk form-formnya. Di sini display-nya kita isikan none;.
Terakhir, kita jalankan dibrowser.
HASIL YANG DIDAPATKAN
Dapat membuat form animasi menggunakan JQuery.
TEMUAN PERMASALAHAN
-
KESIMPULAN
Membuat animasi menggunakan JQuery menurut saya lebih mudah dibandingkan menggunakan CSS. Hal itu dikarenakan pada JQuery kita cukup membuat function kemudian kita hanya perlu memanggil function untuk membuat animasi.
REFERENSI
https://www.malasngoding.com/membuat-animasi-form-dengan-jquery/
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon