Membuat Animasi Form Auto Show Menggunakan Jquery

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan membahas tentang cara Membuat Animasi Form Auto Show Menggunakan Jquery. Dimana animasi form auto show yang saya maksud disini adalah animasi tag input yang akan muncul atau tampil ketika kita sudah melakukan keyup atau pengisian di tag input sebelumnya. Maka tag input di bawahnya akan secara otomatis muncul satu persatu ketika kita sudah melakukan keyup.

Langkah pertama dalam Membuat Animasi Form Auto Show Menggunakan Jquery yaitu kita akan membuat struktur html yang berisi beberapa tag input seperti di bawah ini. Untuk membuat tampilan formnya saya menggunakan bootstrap versi 4.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Animasi Form Auto Show Menggunakan Jquery</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="offset-md-3 col-md-6 bg-secondary p-2">
            <h3 class="text-center">Membuat Animasi Form Auto Show Menggunakan Jquery</h3>
            <input type="text" class="form-control mb-2" id="username" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
            <input type="text" class="form-control mb-2" id="email" placeholder="Email" aria-label="Email" aria-describedby="basic-addon1">
            <input type="text" class="form-control mb-2" id="password" placeholder="Password" aria-label="Password" aria-describedby="basic-addon1">
        </div>
    </div>
</div>
</body>
</html>

Jika sudah selesai maka tahap selanjutnya kita akan membuat script jquery yang berisi event keyup untuk dapat menampilkan tag input secara otomatis ketika kita sudah melakukan keyup pada tag input sebelumnya seperti pada script di bawah ini.

<script>
    $(document).ready(function(){
        var elmInput = $(".form-control");
        elmInput.css({"display":"none"});
        elmInput.eq(0).css({"display":"block"});
        
        $("#username").keyup(function(){
            $("#email").slideDown();
        });

        $("#email").keyup(function(){
            $("#password").fadeIn();
        });
    })
</script>

Jika teman-teman buka dihalaman browser maka tampilan awal seperti pada gambar di bawah ini yang berisi satu tag input.

Dan setelah melakukan keyup atau pengisian pada tag input, maka tag input di bawahnya akan muncul atau tampil satu persatu seperti pada gambar di bawah ini. Yang sebelumnya ada 1 tag input sekarang menjadi 3 tag input.

Membuat Animasi Form Auto Show Menggunakan Jquery

Demikian artikel tentang cara Membuat Animasi Form Auto Show Menggunakan Jquery. Semoga artikel ini dapat bermanfaat untuk kalian dan buat kalian yang penasaran bisa silahkan mempraktekannya.

20 September 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat