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

ValueTypeExplanation
{styles}RequiredSpecifies css styles for the element.
Note: Styles should in camelCase. For example
background-color = backgroundColor
line-height = lineHeight
etc.
speedOptionalSpecifies the speed of the animation effect.
Default value is 400 milliseconds.
Possible values are
  • "slow"
  • "fast"
  • milliseconds
easingOptionalSpecifies the easing function to use for the transition.
Default value is "swing"
Possible values are
  • "swing"
  • "linear"
callbackOptionalSpecifies 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.

Share this Page

Meet the Author