LearnFast.Ninja

jQuery animate properties list

Here a list of the popular properties that used on animate function. Tip: you can animate every CSS numeric property. We recommend you to test the working example code of multi property animate.

The popular properties list that used on animate function:

opacity

left

top

height

width

border - width

margin - left

padding - left

font - size


Tip: you can animate every CSS numeric property.

Working example of multi property animate: 

<html>

<head>

    <title>jQuery animate properties list</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

    <style type="text/css">

        .My_Class {

            background-color: #C0C0C0;

            border: 1px solid #AAA;

            position: relative;

            width: 50%;

        }

    </style>

    <script type="text/javascript">

        function Play_Animate(Class_Name) {

            $("." + Class_Name).animate({

                "border-width": "3px", "padding-left": "30px",

                "left": "30px", "font-size": "20px", "width": "90%"

            });

        }

    </script>

</head>

<body>

    <div class="My_Class">

        This is a tutorial about animate properties

    </div>

    <input type="button" value="Play animate" onclick="Play_Animate('My_Class');" />

</body>

</html>


Tags

jquery

jquery-animate