Click to toggle dark text on white

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.animiate(). These properties can be expressed either as %, px, or in ems.

$(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

© 2006-2010 Abel Mohler How to Hire Me | How Websites are Built | For Developers: jQuery Thumbnail Script