jQuery Animate () Method; In this tutorial, you will learn from scratch what is jQuery animate() effect method and how to use this method with html selected html elements.
jQuery Animate () Effect
The jQuery animate () method is used to create custom animations. Animate the method execute a custom animation by modifying a set of CSS properties on the selected html element.
The animate () method is used for modify the numerical CSS properties of selected HTML elements (i.e. width, height, margin, padding, opacity, top, left).
This method changes the designated CSS properties gradually by increasing or decreasing the value of the property, it can also be modified.
Syntax
(selector).animate({styles},speed,easing,callback)
Parameters of animate method
- speed :- The argument ‘speed‘ determines the duration of this effect.
- easing :- It specifies the easing function to be used for transition.
- callback :- Ihis is an optional parameter. you can specify what to do after the animate() is complete.
All the Styles property of jquery animate()
- backgroundPositionX
- backgroundPositionY
- borderWidth
- borderBottomWidth
- borderLeftWidth
- borderRightWidth
- borderTopWidth
- borderSpacing
- margin
- marginBottom
- marginLeft
- marginRight
- marginTop
- opacity
- outlineWidth
- padding
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- height
- width
- maxHeight
- maxWidth
- minHeight
- minWidth
- fontSize
- bottom
- left
- right
- top
- letterSpacing
- wordSpacing
- lineHeight
- textIndent
jQuery animate() example
In the below example you can see that animate() method effect. Animate () method of jQuery that animates an image from the original position with 400 pixels on the right click button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Animation Effects</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
img{
position: relative;
height: 200px;
width: 300px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("img").animate({
left: 300
});
});
});
</script>
</head>
<body>
<button type="button" id="start">Start Animation</button>
<p>
<img src="//www.tutsmake.com/wp-content/uploads/2019/04/jquery-slidetoggle-animation.jpeg" alt="animate">
</p>
</body>
</html>
Example Animate Multiple Properties
You can animate various properties of a selected HTML element using the animate () method at the same time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of jQuery Multiple Properties Animation</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.box_body{
width: 120px;
height: 100px;
background: #9d7ede;
margin-top: 35px;
border-style: solid;
border-color: #6f40ce;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$(".box_body").animate({
width: "350px",
height: "350px",
marginLeft: "160px",
borderWidth: "12px",
opacity: 0.5
});
});
});
</script>
</head>
<body>
<button type="button" id="start">Start Animation</button>
<div class="box_body"></div>
</body>
</html>
jQuery animate() – Using Pre-defined Values
You can specify the animation value of a property, each property can take string ‘show’, ‘hide’ and ‘toggle’.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of jQuery Multiple Properties Animation</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.box_body{
width: 120px;
height: 100px;
background: #191970;
margin-top: 35px;
border-style: solid;
border-color: #6f40ce;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$(".box_body").animate({
height: 'toggle',
});
});
});
</script>
</head>
<body>
<button type="button" id="start">Start Animation</button>
<div class="box_body"></div>
</body>
</html>
Animate Multiple Properties or Queued Animations
In this example a jQuery queue or chained animation, where each animation will begin after the last animation on the html element is complete.
<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() - Uses Queue Functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.box_body{
background:#191970;
height:100px;
width:100px;
position:absolute;
margin-top: 35px;
border-style: solid;
border-color: #6f40ce;
}
</style>
<script>
$(document).ready(function(){
$("#start").click(function(){
var div = $(".box_body");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
</script>
</head>
<body>
<button id="start">Start Animation</button>
<div class="box_body"></div>
</body>
</html>
