jQuery animate() 自定义动画
2022-03-12 本文已影响0人
马佳乐
语法：
animate(prop[, speed, easing, callback])；
- 参数1:必选的。对象代表的是需要做动画的属性
- 参数2:可选的。代表执行动画的时长
- 参数3:可选的。easing代表的是缓动还是匀速linear(匀速)、swing(缓动)。 默认不写是缓动
- 参数4:可选的。动画执行完毕后的回调函数
代码练习：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
#box2 {
background-color: blue;
margin-top: 150px;
}
#box3 {
background-color: yellowgreen;
margin-top: 300px;
}
</style>
</head>
<body>
<input type="button" value="开始">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<script src="js/jquery.js"></script>
<script>
$(function() {
$("input").eq(0).click(function() {
//第一个参数：对象，里面可以传需要动画的样式
//第二个参数：speed 动画的执行时间
//第三个参数：动画的执行效果
//第四个参数：回调函数
$("#box1").animate({
left: 800
}, 8000);
//swing:秋千 摇摆
$("#box2").animate({
left: 800
}, 8000, "swing");
//linear:线性 匀速
$("#box3").animate({
left: 800
}, 8000, "linear", function() {
console.log("hahaha");
});
})
});
</script>
</body>
</html>
