jQuery animate() Method
You are Here:
jQuery animate() Method
The jQuery animate()
method performs a custom animation of a set of CSS properties.
Note: All animated properties should be animated to a single numeric value. For example, width
, height
, margin
, or left
can be animated but background-color
cannot be animated.
Exemption: String values "show", "hide" and "toggle" can also be animated.
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background: #f69d3c;
margin-bottom: 10px;
line-height: 6;
text-align: center;
}
</style>
</head>
<body>
<h1>jQuery animate() Method</h1>
<div>Div</div>
<button id="myAnimate">Animate</button>
<button id="myStop">Stop</button>
<script>
$(document).ready(function(){
$("#myAnimate").click(function(){
$("div").animate({width: 200}, 2000);
});
$("#myStop").click(function(){
$("div").stop();
});
});
</script>
</body>
</html>
Syntax
$(selector).animate({styles},speed, easing, callback);
Parameter Values
Value | Type | Explanation |
---|---|---|
{styles} | Required | Specifies css styles for the element. Note: Styles should in camelCase. For example background-color = backgroundColor line-height = lineHeight etc. |
speed | Optional | Specifies the speed of the animation effect. Default value is 400 milliseconds. Possible values are
|
easing | Optional | Specifies the easing function to use for the transition. Default value is "swing" Possible values are
|
callback | Optional | Specifies a function to be called once the animate() method is completed. |
Reminder
Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in jQuery.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.