animate() Method - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:animate

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. animate

Description

The animate() method performs animation on CSS properties.

Syntax 

$(selector).animate({styles},speed,easing,callback);
ParameterRequireDescription
styles Required. one or more CSS properties/values to animate.
speed Optional. speed of the animation.
easing Optional. speed of the element in different points of the animation.
callback Optional. function to call after the animation completes.

speed Default value is 400 milliseconds

Possible speed values:

  • milliseconds (like 100, 1000, 5000, etc)
  • "slow"
  • "fast"

easing default value is "swing".

easing Possible values:

  • "swing" - slower at the beginning/end, but faster in the middle
  • "linear" - in a constant speed

Alternate Syntax 

$(selector).animate({styles},{options});
Parameter Require Description
stylesRequired.one or more CSS properties/values to animate
options Optional.additional options for the animation.

Possible values:

  • duration - the speed of the animation
  • easing - easing function
  • complete - function to call after the animation completes
  • step - function call for each step in the animation
  • progress - function call after each step in the animation
  • queue - a Boolean value, whether to place the animation in the effects queue
  • specialEasing - a map of one or more CSS properties from the styles parameter, and their corresponding easing functions
  • start - function to call when the animation begins
  • done - function to call when the animation ends
  • fail - function to call if the animation fails to complete
  • always - function to call if the animation stops without completing

The property names must be camel-cased when used with the animate() method.

You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.

Properties that can be animated:

  • backgroundPositionX
  • backgroundPositionY
  • borderWidth
  • borderBottomWidth
  • borderLeftWidth
  • borderRightWidth
  • borderTopWidth
  • borderSpacing
  • margin
  • marginBottom
  • marginLeft
  • marginRight
  • marginTop
  • outlineWidth
  • padding
  • paddingBottom
  • paddingLeft
  • paddingRight
  • paddingTop
  • height
  • width
  • maxHeight
  • maxWidth
  • minHeight
  • minWidth
  • fontSize
  • bottom
  • left
  • right
  • top
  • letterSpacing
  • wordSpacing
  • lineHeight
  • textIndent

The following code shows how to animate an element by changing its height.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");
        startAnimation();/* w  ww.  j a v a2s  .co m*/
        function startAnimation(){
            div.animate({height: 300}, "slow");
            div.animate({width: 300}, "slow");
            div.css("background-color", "blue");
            div.animate({height: 100}, "slow");
            div.animate({width: 100}, "slow", startAnimation);
        }
    });
});
</script>
</head>
<body>

<button>Start Animation</button>

<div style="width:50px;height:50px;position:absolute;left:10px;top:50px;background-color:red;"></div>

</body>
</html>

Related Tutorials