Hello, readers of this article we will take a look on how to use the JQuery animation feature. We will learn how to implement a few simple examples using the JQuery API and also we will check some details of the method animate provided by the API. Before we start, check the requirements related to the technologies and the frameworks used to the example below:
- jquery 3.2.1
- HTML
- CSS
1. Introduction
The JQuery API provides a method called .animate(). This method allows creating animations using CSS properties. the required parameter for this method is a plain javascript object with a set of CSS properties.
1.2 Properties And Values Overview
An important detail about the CSS properties object is that only the numeric values can be animated. This means that properties like, width, height and left can be animated, but other properties like background-color cannot be. By default, the numeric values passed to the method are treated as pixels. If you want to specify other unit measures, you can use em or % when is applicable.
Other properties values like strings can be sent to this method. The strings that can be used are,'show' 'hide' and 'toggle'. These shortcuts allow creating a custom hiding or showing animation, taking into account the element’s display property.
An interesting feature that this method has, it allows using relative values. If you pass += or -= character sequence, the target value is computed adding or subtracting the passed number using the element’s current property value.,
1.3 Duration
The duration parameter allows passing the period of time for the animation. This value is in milliseconds. Higher values indicate slow animations and lower values indicates fast animations. This parameter also allows pass the strings 'fast' and 'slow'.
1.4 Callback functions
The function parameter allows passing a function based on the different callbacks provided by the API. The callbacks are, start, step, progress, complete, done, fail and always. These callbacks are called on the base element. If you have various elements to animate, these functions are executed per element.
On this example, we’ll implement different basic examples to understand how this feature works.
2. Setup Environment
For implement this example we need the next tools:
- Web Browser (Chrome, FireFox, etc..), to check the Jquery browser compatibility please check this URL
- Text Editor (ATOM, Brackets, Notepad++, etc..)
In order to implement these examples, we’ll use the JQuery CDN. Also, you can download the JQuery library on a non-minified version for development purposes from here.
3. Examples implementation
On this section, we’ll create a few basic examples to illustrate and understand how the JQuery animation API works.
The example below shows how to move an HTML element using the .animate() method passing a simple CSS properties object.
basic_animation.html
<!DOCTYPE html>
<html>
<head>
<!-- Using the jquery CDN -->
<script src="https://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvlibs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#animation").click(function(){
$("#figure").animate({left: '250px'});
//The CSS property object are passed
});
});
</script>
<style>
.circle:before {
content: ' \25CF';
font-size: 200px;
}
.circle{
position:absolute;
}
</style>
</head>
<body>
<button id="animation">Start Animation</button>
<p>This example shows a basic animation using the CSS properties object parameter, keep in mind that all HTML element are static by default we need to set the element's CSS position property of the element to relative, fixed, or absolute!</p>
<div id="figure" class="circle"></div>
</body>
</html>
The example below shows how to use the animate method passing a CSS properties object and duration time for the animation.
duration_animation.html
<!DOCTYPE html>
<html>
<head>
<!-- Using the jquery CDN -->
<script src="https://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvlibs/jquery/3.2.1/jquery.min.js"></script>
<style>
div {
background-color: #bca;
width: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello! Web Code Geek</div>
<script>
$( "#go" ).click(function() {
$( "#block" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );//CSS properties object and duration
});
</script>
</body>
</html>
The example below shows how to use the duration string and a callback function that by default will be executed when the animation is complete.
callback_animation.html
<!DOCTYPE html>
<html>
<head>
<!-- Using the jquery CDN -->
<script src="https://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvlibs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button id="go">» Animate</button>
<p>This example shows a basic animation using the CSS properties object parameter,
duration string and a callback function that is executed by default when the animation is complete
</p>
<script>
$( "#go" ).click(function() {
$( "p" ).animate({
height: 200,
width: 400,
opacity: 0.5
}, "slow", function (){
alert("The animation is complete");
} );//CSS properties object, duration string and a callback function
});
</script>
</body>
</html>
The example below shows how to use the JQuery animation API passing CSS relative properties values and using the duration string value in order to indicate the animation speed.
relative_values_animation.html
<!DOCTYPE html>
<html>
<head>
<!-- Using the jquery CDN -->
<script src="https://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvlibs/jquery/3.2.1/jquery.min.js"></script>
<style>
div {
position: absolute;
background-color: #058CFA;
left: 50px;
width: 90px;
height: 90px;
margin: 5px;
}
</style>
</head>
<body>
<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>
<script>
$( "#right" ).click(function() {
$( ".block" ).animate({ "left": "+=50px" }, "slow" );//passing relative values
});
$( "#left" ).click(function(){
$( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
</script>
</body>
</html>
The example below shows how to use the callbacks on the animate API, in this case, we used the step callback that is called when each animated property passed on the CSS properties object, this callback function is useful for altering the animation when it is occurring.
This callback function also provides 2 paramters now and fx.
nowthe numeric property value that will be animated at each step.fxthis parameter provides a prototype object representation of the animated element and his properties.
step_callback_function_animation.html
<!DOCTYPE html>
<html>
<head>
<!-- Using the jquery CDN -->
<script src="https://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvlibs/jquery/3.2.1/jquery.min.js"></script>
<style>
.block {
position: absolute;
background-color: #058CFA;
left: 50px;
width: 90px;
height: 90px;
margin: 5px;
}
</style>
</head>
<body>
<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>
<div id="result"></div>
<script>
$( "#right" ).click(function() {
$( ".block" ).animate({ "left": "+=50px" },
{duration:"slow", step: function(now, fx){
var data = fx.elem.id + " " + fx.prop + ": " + now;
$( "#result" ).append( "<div>" + data + "</div>" );
}//using the step callback that is called for each animated property
});
});
$( "#left" ).click(function(){
$( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
</script>
</body>
</html>
For more detail about animate callbacks please go to .animate()
4. Conclusion
On this article, we learned about some JQuery animate API details related to how this works, how to consume the API, some characteristics about the parameters that this API receive and some examples to illustrate the behavior of this feature. The JQuery animate feature allows in an easy way, manipulate DOM elements using CSS properties and made this API more useful allowing pass a function for a different callback stages adding more functionality to this feature.
If you want to read more about this feature, check the API .animate()
5. Download The Source Code
These was a JQuery animation examples.
You can download the full source code of this example here: JQueryAnimationExamples
