jQuery animate()
jQuery Tutorial » jQuery animate()
What is jQuery animate?
Animate () in jQuery is a predefined function that uses CSS properties to customize sequential or non-sequential animation using the queue and toggle functionality.
Also this method can be used to change CSS property to create animated effect for the selected item.
Syntax:
{parameter} defines CSS properties to be animated.
The optional: speed parameter specifies the duration of the effect and may have the following values as "slow", "fast" or milliseconds.
The next: callback parameter which can also be optional and is a function that is called after completion of animate() effect.
jQuery simple nimate() method effect.
A simple example of jQuery simple nimate() method effect. We are animating the height and width of the box..
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple example of animate in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#butt").click(function(){
$("#square").animate({height: "250px"}, "slow");
$("#square").animate({width: "250px"}, "slow");
});
});
</script>
</head>
<body>
<button id="butt" style="padding:10px 20px; background:#093; color:#E9E9E9">Animate height and width of box</button>
<div id="square" style="background:blue;height:120px;width:120px;margin:6px;"></div>
</body>
</html>
Related subjects:
jQuery slideDown ()
jQuery slideUp ()
Effects hide / show
jQuery slideToggle
Tags: jquery animate scrolltop, easing, not working, transform, show, scale, transform translate, scroll, slide left
What is jQuery animate?
Can I use jQuery animate?
How can jQuery be used to create animations?
What is custom animation in jQuery?
jquery animation end, function, delay, fade in, speed, rotate, slide left, duration,toggle, effect
Animate Multiple Properties At Once - Example
Also you can animate multiple properties of an item together at the same time using animate method.
All properties will be animated simultaneously without delay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Multiple Properties Animation Examples</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.box{
width: 120px;
height: 120px;
margin-top: 20px;
background-color: #916DDA;
border-style: solid;
border-color: #5029A0;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "100px",
borderWidth: "8px",
opacity: 0.6
});
});
});
</script>
</head>
<body>
<button style="background:#093; color:#EFEFEF; font-weight:bold; padding:10px" type="button">Start Animation</button>
<div class="box"></div>
</body>
</html>
You have to set border-style property for the item before animating its border-width property.
Animate Multiple Properties One by One
Also you can animate multiple properties of an item one by one individually in a queue. - Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Multiple Properties Animation Examples</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.box{
width: 120px;
height: 120px;
margin-top: 20px;
background-color: #916DDA;
border-style: solid;
border-color: #5029A0;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.6});
});
});
</script>
</head>
<body>
<button style="background:#093; color:#EFEFEF; font-weight:bold; padding:10px" type="button">Start Animation</button>
<div class="box"></div>
</body>
</html>
jquery animate scrolltop, easing, not working, transform, show, scale, transform translate, scroll, slide left
What is jQuery animate?
Can I use jQuery animate?
How can jQuery be used to create animations?
What is custom animation in jQuery?
JQuery animate() - jquery
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.