四个点的无限运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四个点的无限运动</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: red;
position: absolute;
top:100px;
left: 100px;
}
</style>
<body>
<div></div>
</body>
</html>
<script src="jquery-3.4.1.min.js"></script>
<script>
//递归函数
/*
* (100,100) (200,100) (200,200) (100,200)
* */
function move() {
$('div').animate({left: '200px'},function () {
$('div').animate({top:'200px'},function () {
$('div').animate({left:'100px'},function () {
$('div').animate({top:'100px'},function () {
move();
})
})
})
})
}
move();
</script>
//数组
<script>
var arr=[
{left:'100px',top:'100px'},
{left:'200px',top:'100px'},
{left:'200px',top:'200px'},
{left:'100px',top:'200px'}
];
var n=0;
function move() {
n++;
$('div').animate(arr[n%4],function (){
move();
})
}
move();
</script>