Mengendalikan animasi

Siapkan HTML dan jQuery

Pastikan Anda sudah menyertakan jQuery dalam proyek Anda. Anda dapat menggunakan versi lokal atau CDN. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="animasi">Klik saya!</div>
</body>
</html>

Buat CSS Untuk Animasi

Tambahkan CSS untuk elemen yang akan dianimasikan:

#animasi {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    color: #fff;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}

Buat Animasi Menggunakan jQuery

Tambahkan kode jQuery untuk mengendalikan animasi:

$(document).ready(function(){
    $("#animasi").click(function(){
        $(this).animate({
            width: "200px",
            height: "200px",
            fontSize: "24px",
            marginLeft: "50px"
        }, 1000, function(){
            // Animasi selesai
            alert("Animasi selesai!");
        });
    });
});

Hasil Akhir

Ketika elemen dengan id "animasi" diklik, animasi akan memperbesar elemen tersebut dan menggesernya ke kanan. Setelah animasi selesai, akan muncul pesan pemberitahuan.

Anda dapat menyesuaikan animasi sesuai kebutuhan Anda dengan mengubah properti CSS yang dianimasikan dan durasi animasi.

Semoga tutorial ini membantu Anda memahami cara mengendalikan animasi menggunakan jQuery!

PREVIOUS
NEXT