我是不是写麻烦了？开始之后停顿4秒，之后才开始了动画是什么原因？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
    <title>Document</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 30px;
height: 30px;
position: absolute;
}
.up {
background: red;
left: 50%;
top: 35%;
}
.left{
background: orange;
left: 35%;
top: 50%;
}
.down{
background: lightblue;
left: 50%;
top: 65%;
}
.right{
background: lightgreen;
left: 65%;
top: 50%;
}
</style>
<body>
    <div class="up"></div>
<div class="left"></div>
<div class="down"></div>
<div class="right"></div>
</body>
<script>
$(document).ready(function(){
 
setInterval(() => {
$('.up').animate({
top: '55%',
borderRadius: '50%'
}, 2000, function () {
$('.up').animate({
top: '35%',
borderRadius: '0'
}, 2000)
});
 
$('.down').animate({
top: '45%',
borderRadius: '50%'
}, 2000, function () {
$('.down').animate({
top: '65%',
borderRadius: '0'
}, 2000)
});
 
$('.left').animate({
left: '55%',
borderRadius: '50%'
}, 2000, function () {
$('.left').animate({
left: '35%',
borderRadius: '0'
}, 2000)
});
 
$('.right').animate({
left: '45%',
borderRadius: '50%'
}, 2000, function () {
$('.right').animate({
left: '65%',
borderRadius: '0'
}, 2000)
});
}, 4000);
 
 
 
});
</script>
</html>

陈子长 2019-01-03

源自：jQuery动画深入详解 3-3 编程练习

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2019-01-03 10:20:52

同学你好，代码实现的效果是不错的，没有写麻烦。

停顿4s才执行是因为定时器设置了4s执行一次：

祝学习愉快！

收起回答

陈子长提问者 #1

那怎么才能让页面一加载就开始运动呢？现在的情况是加载完页面，还得等4s

2019-01-03 16:28:12
好帮手慕星星回复提问者陈子长 #2

如果将定时器的执行时间设置为0，是可以打开页面就执行的，但是动画就不能执行了，因为动画的执行事件大于定时器的时间。所以建议将动画时间调整成1s，定时器时间调整为2s，可以减少一些开始时长。

2019-01-03 17:16:03