jQuery animate() function is used to perform a custom animation of a set of CSS properties. This method allows you to create custom animation only on numeric properties. For example, the properties with numeric values such as width, left, height, opacity can be used with animate() method, but the property like background-color cannot be animated since it has a string value.
jQuery animate（）函数用于执行一组CSS属性的自定义动画。 此方法允许您仅在数字属性上创建自定义动画。 例如，具有数字值的属性（例如宽度，左侧，高度，不透明度）可以与animate（）方法一起使用，但是由于背景颜色等属性具有字符串值，因此无法设置动画。
(jQuery animate)
Here are the general syntaxes used by the animate() method:
以下是animate（）方法使用的常规语法：
-
animate({properties}, speed, easing, callback)animate({properties}, speed, easing, callback) -
animate(properties, options)animate(properties, options)
{properties} defines the property : value pair of the CSS style class.
{properties}定义CSS样式类的property：value对。
speed defines the duration of the effect. “slow”, ”fast” and the numeric values in milliseconds are generally used.
速度定义效果的持续时间。 通常使用“慢”，“快”和以毫秒为单位的数值。
easing defines which easing function like “swing” or “linear” is used for animation.
缓动定义用于动画的“缓动”或“线性”等缓动功能。
callback specifies which function to be called after the animation is completed.
回调指定动画完成后要调用的函数。
options define the additional options for the animation like speed, easing, callback, step, queue, specialEasing etc.
options定义动画的其他选项，例如速度，缓动，回调，步进，队列，specialEasing等。
(jQuery animate example)
We will create animation like below using jQuery animate function.
我们将使用jQuery animate函数创建如下所示的动画。
Following code demonstrates how to achieve above animation, we will also use animate() method with a call back. The runAnimation() method contains the code to animate. The callBackAnimation() method is called on completion of the animation and used to create the alert.
以下代码演示了如何实现上述动画，我们还将使用animate()方法进行回调。 runAnimation()方法包含要进行动画处理的代码。 动画完成时会调用callBackAnimation()方法，并用于创建警报。
<!DOCTYPE html>
<html>
<head>
<title> JQuery Animation</title>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
runAnimation();
function runAnimation(){
div.animate({height:300},"slow");
div.animate({width:300},"slow");
div.css("background-color","green");
div.animate({height:100},"slow");
div.animate({width:100},"slow",callBackAnimation);
}
function callBackAnimation(){
alert("Animation completed");
}
});
});
</script>
</head>
<body>
<button>Run</button>
<div style="width:70px;height:70px;position:absolute;left:20px;top:50px;background-color:red;"></div>
</body>
</html>Click on below link to see the demo page and try yourself.
单击下面的链接以查看演示页面并尝试一下。
jQuery动画演示 (jQuery animate Demo)
jQuery performs custom animation with the animate() method. This method cannot be employed to animate the non-numeric properties. The animate method uses CSS style class properties with numeric values for animation.
jQuery使用animate（）方法执行自定义动画。 此方法不能用于对非数字属性进行动画处理。 animate方法使用具有数字值CSS样式类属性进行动画处理。
For a real life example, please check out jQuery scroll to top.
有关真实示例，请查看jQuery滚动到top 。
Reference: API Doc
参考： API文档
翻译自: https://www.journaldev.com/4642/jquery-animate-examples
