How to use Effect Animate() Method in JQuery

In this article I am going to explain about animate() Method in jquery.
  • 2083

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
 
Ask Your Question 
 
Got a programming related question? You may want to post your question here
 
© 2020 DotNetHeaven. All rights reserved.