Then animate() method available in jQuery could be used for creating an interactive UI for our webpages. We use the animate() method to perform a custom animation of a set of CSS properties.
The animate() method won’t be able to animate string values, for example, we can’t animate the “background-color” and such properties like that in regular jQuery. We will only be able to animate single numeric values. For example, height, weight, margin, padding, etc.
In this article, we will see the various scenario where we can make some actual use of the animate() method.
Syntax:
.animate( <css properties>, duration, easing, callback)
- CSS properties: height, weight, margin, padding, etc (properties with the single numeric values).
- duration: It will be a string or number that will determine how long the animation will run.
- callback: It is a function that could be called when the animation is finished.
We will see some examples that we create with the .animate method and use in our projects.
Example 1: The following example animates a search bar on hover. We are going to create a search bar that is of normal size but when we hover the mouse, the width of the search bar will be extended.
<!DOCTYPE html> <html>
<head>
<script src=
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: rgb(34, 34, 34);
}
#Container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
}
#t1 {
margin: 20px;
padding-left: 10px;
font-size: 20px;
text-align: center;
width: 50px;
height: 50px;
border: none;
background-color: floralwhite;
background-image: url(
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
outline: none;
}
</style>
</head>
<body>
<div id="Container">
<h3>SEARCH</h3>
<input type="text" id="t1" />
</div>
<script>
$(document).ready(function() {
$("#t1").mouseover(function() {
$("#t1").animate({
width: "200px",
borderRadius: "50px",
backgroundSize: "0px",
});
});
$("#t1").mouseout(function() {
$("#t1").animate({
width: "50px",
borderRadius: "50px",
backgroundSize: "30px",
});
});
});
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates animating a loading screen using opacity value. In this example, we will create a loading text that will be animated with the opacity, to get the feeling that it is still loading.
<!DOCTYPE html> <html>
<head>
<script src=
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: rgb(34, 34, 34);
}
#Container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
}
.loading {
height: 50px;
width: 200px;
background-color: rgb(0, 0, 0);
color: green;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
</style>
</head>
<body>
<div id="Container">
<div class="loading">
Loading...
</div>
</div>
<script>
$(document).ready(function() {
var div = $(".loading");
div.animate({
opacity: '0.5'
}, "slow");
div.animate({
opacity: '0.9'
}, "slow");
div.animate({
opacity: '0.5'
}, "slow");
div.animate({
opacity: '0.9'
}, "slow");
div.animate({
opacity: '0.5'
}, "slow");
div.animate({
opacity: '0.9'
}, "slow");
});
</script>
</body>
</html>
|
Output: