📅 最后修改于: 2023-12-03 15:11:57.973000 🧑 作者: Mango
jQuery中的animate()方法用于在一定时间内将元素从一个状态平滑地过渡到另一个状态，从而可以创建动画效果。通过该方法，可以使用CSS的属性来控制元素的动画变化，支持在动画中逐渐改变元素的属性值，实现渐变效果。
$(selector).animate(styles, [options])
selector: jQuery选择器，用于选定需进行动画处理的元素。
styles: 对象，包含CSS属性名称和属性值的键值对，设置动画开始和结束时CSS属性的值。
options: 对象，包含动画选项（如动画持续时间、动画缓动效果、动画完毕后执行的动作等）的键值对。
$("#box").animate({
left: "+=200px",
opacity: 0.5,
height: "toggle"
}, 2000);
上述代码使用了animate()方法，将ID为box的元素向右移动200个像素，同时降低它的不透明度到0.5，还将该元素的高度进行了切换。
在代码中，"left"、"opacity"、"height"分别表示元素的CSS属性名称，后面的值为改变属性名称所对应的变化量或目标值。动画持续时间为2000毫秒（2秒）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery animate() 方法示例</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({
left: "+=200px",
opacity: 0.5,
height: "toggle"
}, 2000);
});
$("#stop").click(function(){
$("#box").stop();
});
});
</script>
</head>
<body>
<p>
<button id="start">开始动画</button>
<button id="stop">停止动画</button>
</p>
<div id="box"></div>
</body>
</html>
上述完整示例中包含了两个按钮：开始动画和停止动画。通过点击"开始动画"按钮，可以让box元素向右移动200像素、降低不透明度到0.5、高度切换掉；通过点击"停止动画"按钮，可以立即停止元素的动画运行。
animate()方法可用的动画选项包括：duration（动画播放时间）、easing（动画缓动效果）、complete（动画播放完毕后执行的回调方法）等。例如：
$("#box").animate({
left: "+=200px",
opacity: 0.5,
height: "toggle"
}, {
duration: 2000,
easing: "easeInOutQuad",
complete: function() {
alert("动画播放完毕！");
}
});
在上述动画选项中，通过"duration"设置动画播放时间为2000毫秒（2秒），通过"easing"设置动画缓动效果为"easeInOutQuad"（即缓慢出现又缓慢消失），通过"complete"设置动画播放完毕后弹出提示框。