jquery animate() method


  Translation results：

animate

英[ˈænɪmeɪt] 美[ˈænəˌmet]

vt. To animate; to drive; to make lifelike movements; to give life to…

adj. Living; living; animated; vigorous

jquery animate() methodsyntax

Function: The animate() method performs custom animations of CSS property sets. This method changes an element from one state to another through CSS styles. CSS property values ​​change gradually, allowing you to create animated effects. Only numeric values ​​can be animated (e.g. "margin:30px"). String values ​​cannot be animated (such as "background-color:red"). Use " =" or "-=" to create relative animations.

Syntax 1: $(selector).animate(styles,speed,easing,callback)

Parameters:

ParametersDescription
styles Required. Specifies the CSS styles and values ​​that produce animation effects.
speed Optional. Specifies the speed of the animation. The default is "normal". Possible values: milliseconds (e.g. 1500) "slow" "normal" "fast"
easing Optional. Specifies an easing function that sets the animation speed at different animation points. Built-in easing functions: More easing functions are provided in the swing linear extension.
callback Optional. The function to be executed after the animate function is executed.

## Syntax 2:
$(selector).animate(styles,options)

Parameters:

Parameter Descriptionstyles Required. Specifies the CSS styles and values ​​that produce animation effects (same as above). optionsOptional. Specifies additional options for animation. Possible values: speed - sets the speed of the animation easing - specifies the easing function to be used callback - specifies the function to be executed after the animation is completed step - specifies the function to be executed after each step of the animation is completed queue - Boolean value. Indicates whether to place the animation in the effects queue. If false, the animation will start immediately specialEasing - a map of one or more CSS properties from the styles parameter, and their corresponding easing functions

jquery animate() methodexample

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
  {
  $(".btn1").click(function(){
    $("#box").animate({height:"300px"});
  });
  $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
  });
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
</body>
</html>
Run instance »

Click the "Run instance" button to view the online instance

Home

Videos

Q&A