jQuery animate示例
时间：2020-02-23 14:46:05 来源:igfitidea点击:
jQuery animate()函数用于执行一组CSS属性的自定义动画。
此方法允许您仅在数字属性上创建自定义动画。
例如，具有数字值的属性(例如宽度，左侧，高度，不透明度)可以与animate()方法一起使用，但是由于背景属性(例如background-color)具有字符串值，因此无法进行动画处理。
jQuery animate
以下是animate()方法使用的常规语法：
animate({properties}, speed, easing, callback)animate(properties, options)
{properties}定义CSS样式类的property：value对。
速度定义效果的持续时间。
通常使用"慢"，"快"和以毫秒为单位的数值。
缓动定义用于动画的"缓动"或者"线性"等缓动功能。
回调指定动画完成后要调用的函数。
选项定义动画的其他选项，例如速度，缓动，回调，步进，队列，specialEasing等。
jQuery animate示例
我们将使用jQuery animate函数创建如下所示的动画。
以下代码演示了如何实现上述动画，我们还将在调用时使用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>
