AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery animate()


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

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:

$(selector).animate({parameter}, speed, callback);

{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..

<!DOCTYPE html>
<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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.