Quick Reach
- 1 What is the jQuery animate method?
- 2 The Video Tutorial of animate method
- 3 An example of animating the height
- 4 Example of animation for width of DIV block
- 5 animate jQuery for height and width (using multiple CSS properties)
- 6 Queue functionality – First width then height example
- 7 Animating Text with jquery animate()
- 8 jquery animate opacity example
- 9 jquery animate easing
- 10 Related
What is the jQuery animate method?
A powerful feature of jquery is animation method to use in web pages in an easy way. We know how CSS powers HTML in styling or presenting web documents for good user experience. How about animating CSS styles/properties using jquery?
The Video Tutorial of animate method
The jQuery animate() method is used to create custom animations on the basis of certain CSS properties.
In this chapter, we will go through how to use animate() method along with CSS properties that can be used for animations.
Syntax of jQuery animate() method
$(selector).animate({css_properties},duration, easing, complete);
Where
Selector = can be an element like div, p, etc.
css_properties = CSS properties to be given here to be used for animation – see examples below
Duration = Optional parameter that specifies the hide speed with possible values of
- “slow”
- “fast”
- Or value in milliseconds
Easing = [optional] Specifying transition function value here with possible values of ‘swing’ and ‘linear’. Linear moves animation at a constant speed from start to end.
Complete = after the animate() method is completed, an optional callback function to perform the certain action can be given.
Below are few examples of animation using jquery with different CSS properties.
An example of animating the height
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<head>
<title>jQuery Animate</title>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“#animate_button”).click(function() {
$(“.animate_spec”).animate({“height”: “150px”},“slow”);
});
});
</script>
<style type=”text/css”>
.animate_spec {
background-color:#bbaa00;
width:400px;
height:50px;
}
</style>
</head>
<body>
<button id=“animate_button”>Animate for height</button></button>
<div class=“animate_spec”>Example of animation for height</div>
</body>
</html>
|
Example of animation for width of DIV block
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<head>
<title>jQuery Animate</title>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“#animate_button”).click(function() {
$(“.animate_spec”).animate({“width”: “500px”},“slow”);
});
});
</script>
<style type=”text/css”>
.animate_spec {
background-color:#bbaa00;
width:200px;
height:150px;
}
</style>
</head>
<body>
<button id=“animate_button”>Animate for width</button></button>
<div class=“animate_spec”>Example of animation for width</div>
</body>
</html>
|
animate jQuery for height and width (using multiple CSS properties)
The example below uses multiple CSS properties (height and width) to animate DIV element of the document.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<head>
<title>jQuery Animate</title>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“#animate_button”).click(function() {
$(“.animate_spec”).animate({width: ‘500’,height:‘300’},“slow”);
});
});
</script>
<style type=”text/css”>
.animate_spec {
background-color:#bbaa00;
width:270px;
height:150px;
}
</style>
</head>
<body>
<button id=“animate_button”>Animate for height and width</button></button>
<div class=“animate_spec”>Example of animation for height and width</div>
</body>
</html>
|
Queue functionality – First width then height example
In this example, multiple jquery animate() calls will be used for animation. jQuery by default creates an internal queue for animate() calls. This is very useful if the first animation is required to be completed and then starting the second and so on animations.
In above example, as we seen height and width animation of DIV executed simultaneously. In the following example, first width animation will be completed followed by height.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<head>
<title>jQuery Animate</title>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“#animate_button”).click(function() {
$(“.animate_spec”).animate({width: ‘500’,opacity:‘0.8’},“slow”);
$(“.animate_spec”).animate({height:‘300’,opacity:‘0.5’},“slow”);
});
});
</script>
<style type=”text/css”>
.animate_spec {
background-color:#bbaa00;
width:270px;
height:150px;
}
</style>
</head>
<body>
<button id=“animate_button”>Animate for height and width</button></button>
<div class=“animate_spec”>Example of animation for height and width with jquery animate() queue</div>
</body>
</html>
|
Animating Text with jquery animate()
Below example will first animate width and height and then increase the font size of text with animation.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<head>
<title>jQuery Animate</title>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“#animate_button”).click(function() {
$(“.animate_spec”).animate({width: ‘500’,opacity:‘0.8’},“slow”);
$(“.animate_spec”).animate({height:‘150’,opacity:‘0.5’},“slow”);
$(“.animate_spec”).animate({fontSize:‘4em’},“slow”);
});
});
</script>
<style type=”text/css”>
.animate_spec {
background-color:#bbaa00;
width:270px;
height:50px;
}
</style>
</head>
<body>
<button id=“animate_button”>Animate for text</button></button>
<div class=“animate_spec”>jquery animate()</div>
</body>
</html>
|
jquery animate opacity example
Click here for animate with opacity
jquery animate easing
Click here to learn how to use jQuery animate easing
Leave A Comment?