jQuery : Efek Animasi

Belajar Web Design
Metode Animasi

Metode jQuery animate() digunakan untuk membuat custom animasi. Metode animate() biasanya digunakan untuk menganimasi properti CSS numerik, misalnya, width, height, margin, padding, opacity, top, left, dll. Tetapi properti non-numerik seperti color atau background-color tidak dapat dianimasikan menggunakan fungsionalitas jQuery dasar.

Catatan: Tidak semua properti CSS dapat dianimasikan. Secara umum, properti CSS apa pun yang menerima nilai yang berupa number, length, percentage, ataupun color adalah animatable. Namun, animasi warna tidak didukung oleh inti jQuery library. Untuk memanipulasi dan menghidupkan warna gunakan plugin warna jQuery.

Syntax

Sintaks dasar metode jQuery animate() dapat diberikan dengan:

$(selector).animate({ properties }, duration, callback);

Parameter dari metode animate() memiliki arti sebagai berikut:

  • Parameter properti yang diperlukan menentukan properti CSS yang akan dianimasikan.
  • Parameter durasi opsional menentukan berapa lama animasi akan berjalan. Durasi dapat ditentukan baik menggunakan salah satu string yang telah ditentukan ‘slow’ atau ‘fast’, atau dalam beberapa milidetik; nilai yang lebih tinggi menunjukkan animasi yang lebih lambat.
  • Parameter callback opsional adalah fungsi untuk memanggil setelah animasi selesai.

Berikut adalah contoh sederhana dari metode jQuery animate() yang menggerakkan gambar dari posisi aslinya ke kanan sebanyak 300 piksel saat mengklik tombol.

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

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

Menganimasikan Beberapa Properti Sekaligus

Kalian juga bisa menganimasikan beberapa properti elemen sekaligus secara bersamaan menggunakan metode animate(). Semua properti dianimasikan secara simultan tanpa penundaan.

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

Kiat: Kalian harus mengatur properti border-style untuk elemen sebelum menganimasikan properti border-with. Elemen harus memiliki batas sebelum kalian dapat menganimasikan border width, karena nilai default properti border-style tidak ada.

Animate Multiple Properties Satu per Satu atau Queued Animasi

Kalian juga dapat menganimasi beberapa properti elemen satu per satu secara individual dalam queue menggunakan fitur chaining jQuery. Kita akan belajar lebih banyak tentang chaining di bab selanjutnya.

Contoh berikut menunjukkan jQuery queued atau chaining, di mana setiap animasi akan dimulai setelah animasi sebelumnya pada elemen selesai.

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>
Properti Animate dengan Nilai Relatif

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

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>
Properti Animate dengan Nilai yang Telah Ditentukan Sebelumnya

Selain nilai numerik, setiap properti dapat mengambil string ‘show’, ‘hide’, dan ‘toggle’. Ini akan sangat membantu dalam situasi ketika kalian hanya ingin menghidupkan properti dari nilai saat ini ke nilai awal dan sebaliknya.

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>

No related posts.