5. animate()
jQuery provides us a convenient way of animating arbitrary CSS properties via the .animate() method. The .animate() method lets usu animate to a set value, or to a value relative to the current value.
Here is our new html file (j5_animation.html):
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Animations</title>
</head>
<body>
<h1>This is test for jQuery animations. </h1>
<style type="text/css">h2 {background-color:limegreen; }</style>
<h1>1st heading</h1>
<h1>2nd heading</h1>
<h1>3rd heading</h1>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js""></script>
<script type="text/javascript" src="jQuery_animation.js"></script>
<script> </script>
</body>
</html>
Let's make our js file, jQuery_animation.js. It starts like this:
$( document ).ready(function() {
$('h1').click(function(){
$('h2').animate({}, 1000);
});
});
The .animate() has two parameters:
- The 1st parameter: {}
The CSS properties we're going to animate will be inside of the curly braces. - The 2nd parameter: 1000 - duration of the animation.
For the CSS properties, we usually start after making some spaces:
$( document ).ready(function() {
$('h1').click(function(){
$('h2').animate({
}, 1000);
});
});
If we want to animate font properties:
$( document ).ready(function() {
$('h1').click(function(){
$('h2').animate({
"font-size": "50px"
}, 1000);
});
});
We can see the animation from a playback below:
We can add more properties for the animation:
$( document ).ready(function() {
$('h1').click(function(){
$('h2').animate({
"font-size": "50px",
"width": "70%",
"left": "200px"
}, 1000);
});
});
To make the "left" work, we need to specify the way of positioning in our html for the css style:
<style type="text/css">h2 {background-color:limegreen; position: relative }</style>
We can see the animation for those three CSS properties from a playback below:
In this section, we're going to combine two tricks:
- "left": "+=50px" - this will increment the left position by 50px for each animation.
- "font-size": "toggle" - this will toggle hide/show.
Here is our new js file:
$( document ).ready(function() {
$('h1').click(function(){
$('h2').animate({
"font-size": "toggle",
"width": "70%",
"left": "+=50px"
}, 1000);
});
});
Here are the movie that shows the animation:
In this section, we want to add another animation after the animation in the previous section. We're adding fadeOut(1000) after the previous animation. We need to modify the js file:
$( document ).ready(function() {
$('h1').click(function(){
$('h2').animate({
"font-size": "toggle",
"width": "70%",
"left": "+=50px"
}, 1000, function(){});
});
});
The fadeOut() will go inside the {}, so the new js file looks like this:
$( document ).ready(function() {
$('h1').click(function(){
$('h2').animate({
"font-size": "toggle",
"width": "70%",
"left": "+=50px"
}, 1000, function(){
$('h3').fadeOut(100);
});
});
});
The newlyh added code will fade out the h3 element after finishing the previous animation.
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization
My YouTube channel