Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

jquery animate function

Suggested Videos
Part 43 - jQuery image gallery
Part 44 - Optimise jQuery image gallery
Part 45 - jquery image slideshow with thumbnails



jQuery animate function let's us animate CSS properties.



The following example animates the div element, while changing the font-size property of the div element from its initial size to 50 pixels over a period of 2000 milli-seconds (2 seconds).

<html>
<head>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myButton').click(function () {
                $('#myDiv').animate({ 'font-size': '50' }, 2000);
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    <input type="button" id="myButton" value="Animate" />
    <br /><br />
    <div id="myDiv">
        jQuery animate function
    </div>
</body>
</html>

Syntax of jquery animate function
.animate( properties [, duration ] [, easing ] [, complete ] )

Animate function has 4 parameters. Only the first parameter (properties) is the required parameter. Rest 3 are optional.

Parameter Description
properties An object of CSS properties and values
duration The duration for animation in milliseconds. Default is 400.
easing Easing function to use for the transition. Default is swing. You could also use linear.
complete A function to call once the animation is complete

What is jQuery easing
Easing is a technique where the speed and/or direction of animation are changed while the animation is in progress. Easing can make the animation start off slow and gradually speed up, start up fast and gradually slow down, and a whole host of other effects. The difference between linear and swing easing is very subtle.

The following page shows all the easings provided by jQuery UI
https://jqueryui.com/easing

The following example increases the height and width of the image to 400 pixels on mouseover. On mouseout the height and width are reduced to 100 pixels.

<html>
<head>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myImage').on({
                mouseover: function () {
                    $(this).animate({
                        'height': 400,
                        'width': 400,
                    }, 3000);
                },
                mouseout: function () {
                    $(this).animate({
                        'height': 100,
                        'width': 100,
                    }, 3000);
                }
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    <img id="myImage" height="100" width="100" src="/Images/Tulips.jpg" />
</body>
</html>

In the following example, several calls to animate() method are chained together. By default these calls are placed into a queue to be executed one after the other in series rather than executing all of them simultaneously in parallel.

<html>
<head>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myImage').click(function () {
                $(this)
                    .animate({ 'left': '300' })
                    .animate({ 'top': '200' })
                    .animate({ 'left': '10' })
                    .animate({ 'top': '10' });
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    <img id="myImage" height="100" width="100" style="position:absolute"
         src="/Images/Tulips.jpg" />
</body>
</html>

Please note: By default, all HTML elements have a static position, and cannot be moved. To modify the position , set the CSS position property of the element to fixed, absolute or relative.

jQuery tutorial for beginners

2 comments:

  1. Hi Venkat Sir,

    i have watched all the videos that are present in your blog.Those are very helpful for beginners as well as intermediate .net developers. So a small request from my side that do you have any idea to make an "unit testing video series".? Because you mentioned in "Part 17 - AsEnumerable and AsQueryable in LINQ" that the follwing sentence.
    "We will discuss AsQueryable operator in detail with examples in unit testing video series."
    Can you please upload unit testing series which is very helpful for me as well as all the users of this blog.

    Thanks and Regards,

    Jaipal Reddy

    ReplyDelete
  2. hi venkat sir.. kindly upload the videos on Ajax ...pls

    ReplyDelete

It would be great if you can help share these free resources