Menambahkan Efek Animasi dengan jQuery

Metode animate() pada jQuery dapat digunakan untuk membuat animasi custom. Metode animate() biasanya digunakan untuk menganimasikan properti CSS numerik, misalnya, lebar, tinggi, margin, padding, opacity, atas, kiri, dll. Tetapi properti non-numerik seperti color atau background-color tidak dapat dianimasikan menggunakan fungsi dasar jQuery.

Catatan: Tidak semua properti CSS dapat dianimasikan. Umumnya, properti CSS yang memiliki nilai berupa angka seperti panjang, persentase, atau warna adalah dapat dianimasikan (Animatable). Namun, animasi warna tidak didukung oleh Library jQuery. Untuk memanipulasi dan menganimasikan warna, kalian dapat menggunakan plugin warna jQuery.


Syntax Metode animate()

Syntax atau tatacara penulisan dasar metode animate() pada jQuery adalah sebagai berikut:

$(selector).animate({ properti }, durasi, callback);


Parameter dari metode animate() memiliki arti sebagai berikut:
  • Parameter properti yang diperlukan dapat menentukan properti CSS yang akan dianimasikan.
  • Parameter opsional durasi menentukan berapa lama animasi akan berjalan. Durasi dapat ditentukan baik menggunakan salah satu string yang telah ditentukan yaitu "slow" atau "fast", atau dalam satuan milidetik; nilai satuan yang lebih tinggi menunjukkan animasi yang lebih lambat.
  • Parameter opsional Callback adalah fungsi untuk dipanggil setelah animasi selesai.

Berikut adalah contoh sederhana dari metode animate() yang dapat menganimasikan gambar dari posisi aslinya menjadi ke kanan sebanyak 300 Pixel saat tombol diklik:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("img").animate({
                left: 300
            });
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Semua elemen HTML secara default memiliki posisi static. Karena elemen static tidak dapat dipindahkan, maka kalian harus mengatur properti position pada CSS untuk mengubah elemen menjadi relative, fixed, atau absolute untuk memanipulasi atau menganimasikan posisinya.

Menganimasikan Beberapa Properti Bersamaan

Kalian juga dapat menganimasikan beberapa properti elemen sekaligus bersamaan dengan menggunakan metode animate(). Semua properti dapat dianimasikan secara langsung tanpa tertunda:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(".kotak").animate({
                width: "300px",
                height: "300px",
                marginLeft: "150px",
                borderWidth: "10px",
                opacity: 0.5
            });
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: Kalian juga dapat menganimasikan beberapa properti elemen sekaligus secara bersamaan dengan menggunakan metode animate(). Semua properti akan dianimasikan secara langsung tanpa adanya penundaan.

Tips: Kalian harus mengatur properti border-style untuk suatu elemen sebelum menganimasikan properti border-width. Elemen tersebut juga harus memiliki border sebelum kalian dapat menganimasikan border-width karena nilai default dari properti border-style belum ada.

Menganimasikan Beberapa Properti Satu Per-Satu

Kalian juga dapat menganimasikan beberapa properti elemen satu per satu (Antrian) dengan menggunakan fitur Chaining pada jQuery. Kita akan belajar lebih banyak tentang Chaining pada bagian selanjutnya.

Berikut adalah contoh yang akan menampilkan animasi satu-per-satu atau Chaining pada jQuery, di mana setiap animasi akan dimulai setelah animasi sebelumnya telah dijalankan:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(".kotak")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Menganimasikan Properti dengan Nilai Relatif

Kalian juga dapat menentukan nilai relatif untuk properti animasi. Jika nilai telah ditentukan dengan awalan prefix += atau -=, maka nilai target akan dihitung dengan menambahkan atau mengurangi angka yang diberikan dari nilai properti saat ini:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(".kotak").animate({          
                top: "+=50px",
                left: "+=50px",
                width: "+=50px",
                height: "+=50px"
            });
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Menganimasikan Properti dengan Nilai Telah Ditentukan Sebelumnya

Selain nilai numerik (Angka), setiap properti juga dapat mengambil string "show", "hide", dan "toggle". String tersebut akan sangat berguna pada situasi ketika kalian hanya ingin menganimasikan properti dari nilai saat ini ke nilai awal, begitupula sebaliknya:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(".kotak").animate({
                width: 'toggle'
            });
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Tulis Komentar

0 Komentar