我是不是写麻烦了？开始之后停顿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>0
收起
正在回答
1回答
同学你好，代码实现的效果是不错的，没有写麻烦。
停顿4s才执行是因为定时器设置了4s执行一次：
祝学习愉快！
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星