当我们需要用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秒钟内以渐变的方式消失。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript 中动画制作方法 animate()属性 - Python技术站