Animation In JQuery

jQuery Effect Animate() Method

Use of jquery animate() method for create custom animation in our document. Custom animated crated by set different type of CSS properties. For example: size, border size, margin, padding etc. When event is occurs then properties value will be change. jquery animate() method only work on numertic value as like (height 500px). Its not work on string value as like (Color:green).

Syntax

(selector).animate({styles:value})

Example

In this example div width size is 100px when we click on button then size will be  change 250px.

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("#but").click(function () {

            $("#abc").animate({ width: "250px" });

        });

      

    });

</script>

</head>

<body>

<div id="abc" style="background:blue;height:75px;width:100px;">

</div>

<button id="but">click me</button>

</body>

</html>

Output

Before click

beforeclick.jpg

After click      

afterclick.jpg                   

You may also want to read these related articles: here