Click to toggle dark text on white

Lession 2: Properties than can be animated with jQuery

Any CSS property with a numeric value can be animated with jQuery. Font-size, border-width, margin, padding, top, left, bottom, and right can be animated simply by passing the desired end point to jQuery.animate(). These properties can be expressed either as %, px, or in ems.

Show Code

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

Notice that properties such as margin-left and border-width are expressed in camelCase instead of with dashes. This is due to the JavaScript convention that does not allow dashes in symbol names. Any time you want to manipulate a CSS property with a dash in it, use camelCase to separate the words instead of a dash.

<< First Page Animation Callbacks >>

Wayfarer

Most Recent Blog Post: jQuery Mapbox Updated

Privacy Policy | Click Here | jQuery Plugins by Wayfarer | Freelance Jobs Available | Random JavaScript Code Samples | Share a Random Link | JavaScript Jobs