Contoh Jquery Animation ke-2

Setiap properti CSS dengan nilai numerik dapat animasi dengan jQuery. Font-size, border-width, margin, padding, atas, kiri, bawah,dan kanan dapat digerakkan hanya dengan melewati titik akhir yang diinginkan untuk jQuery.animate (). Properti ini dapat dinyatakan baik sebagai%, px, atau di ems.

Show Code

 
$(document).ready(function() {
    $("#clickhere").click(function() {
        $("#animate1").animate({
            height: "20px",
            width: "50%",
            padding: "5em",
            marginLeft: "40px",
            borderWidth: "5px"
        }, 1000);
    });
});

Perhatikan bahwa properti seperti margin-left dan perbatasan-lebar disajikan dalam CamelCase bukan dengan tanda hubung. Hal ini disebabkan konvensi JavaScript yang tidak memungkinkan tanda hubung dalam nama simbol. Setiap kali Anda ingin memanipulasi properti CSS dengan sedikit di dalamnya, gunakan CamelCase untuk memisahkan kata-kata bukan tanda hubung.