Quick Reach
jquery animate easing
As we seen in jquery animate() syntax, it used optional easing parameter. Easing Specifies transition with possible values of ‘swing’ and ‘linear’.
- Linear moves animation at a constant speed from start to end.
- Swing moves animation slower at the beginning and end while faster in middle.
Example of using easing
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’},“slow”,“swing”);
$(“.animate_spec”).animate({height:‘300’},“slow”,“linear”);
});
});
</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 with easing</button></button>
<div class=“animate_spec”>Example of animation for height and width with jquery animate() queue</div>
</body>
</html>
|
You can use jqueryui’s library for more easing effects. This is library that can be included:
<script src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js”></script>
Example of using jqueryui’s library
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<head>
<title>jQuery Animate</title>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“#animate_button”).click(function() {
$(“.animate_spec”).animate({width: ‘500’},“slow”,“easeOutBounce”);
$(“.animate_spec”).animate({height:‘300’},“slow”,name);
});
});
</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 with opacity</button></button>
<div>Example of animation for height and width with jquery animate() queue</div>
</body>
</html>
|
For complete reference go to http://jqueryui.com/effect/#easing
Leave A Comment?