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 easingEasing 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 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>

<scriptsrc="jquery-1.11.2.js"></script>

<scripttype="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>

<bodystyle="font-family:Arial">

<imgid="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>

<scriptsrc="jquery-1.11.2.js"></script>

<scripttype="text/javascript">

$(document).ready(function () {

$('#myImage').click(function () {

$(this)

.animate({ 'left': '300' })

.animate({ 'top': '200' })

.animate({ 'left': '10' })

.animate({ 'top': '10' });

});

});

</script>

</head>

<bodystyle="font-family:Arial">

<imgid="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.

2 comments:

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.