当我们需要用JavaScript来制作一个动画时，最常用的办法就是使用animate()属性。它可以让我们定义元素在一段时间内的移动、淡入/淡出、尺寸变化等动画效果。
基本语法
animate()的基本语法如下：
$(selector).animate({styles},speed,easing,callback)
参数说明：
selector：表示需要动画的元素选择器styles：表示需要设置的样式变化，可以在其中设定元素在动画期间的属性值speed：表示动画运行的时间，单位是毫秒，默认值为400easing：表示动画的缓动效果，比如“linear”表示匀速运动，“swing”表示加速再减速，默认值为“swing”callback：表示动画执行完毕后的回调函数，可以在其中添加一些额外的操作
示例一
下面是一个移动动画的示例。这里我们定义一个按钮，点击按钮后可以用动画的方式将一个元素（用红色字体来标识）向右移动200像素。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animation Demo</title>
<style>
#target {
color: red;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("#target").animate({
left: '200px'
});
});
});
</script>
</head>
<body>
<button id="btn1">移动</button>
<div id="target">Hello World!</div>
</body>
</html>
在上述代码中，我们选择#btn1按钮，为其添加了一个click()点击事件，当点击按钮时，我们选中了#target元素，为其添加了一个animation()样式，指定它将从原始位置向右移动200像素。
示例二
下面是一个淡入淡出动画的示例。这里我们定义了两个按钮，点击按钮时可以用渐变的方式显隐一个元素。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animation Demo</title>
<style>
#target {
display: none;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("#target").fadeIn();
});
$("#btn2").click(function() {
$("#target").fadeOut();
});
});
</script>
</head>
<body>
<button id="btn1">淡入</button>
<button id="btn2">淡出</button>
<div id="target">Hello World!</div>
</body>
</html>
在上述代码中，我们选择了两个按钮，为它们分别添加了一个click()点击事件，当点击#btn1按钮时，选中了#target元素，为其添加了一个fadeIn()样式，代表在1秒钟内以渐变的方式显现出来；而当点击#btn2按钮时，选中同样的元素，为其添加了一个fadeOut()样式，代表在1秒钟内以渐变的方式消失。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！