为什么这样写就对呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
#box {
position: relative;
margin: 200px
}
#box div {
width: 50px;
height: 50px;
position: absolute
}
.box1 {
background-color: red;
left: 0;
top: 0;
}
.box2 {
background-color: green;
left: -100px;
top: 100px;
}
.box3 {
background-color: yellow;
left: 100px;
top: 100px;
}
.box4 {
background-color: blue;
left: 0;
top: 200px;
}
</style>
</head>
<body>
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
<script>
var box1 = $(".box1"),
box2 = $(".box2"),
box3 = $(".box3"),
box4 = $(".box4");
function animaDiv() {
box1.animate({
top:"+=150",
borderRadius:"50%",
opacity:".5"
},1000,function () {
$(this).animate({
top: "-=150",
borderRadius: 0,
opacity: "1"
}, 1000)
});
box2.animate({
left: "+=150",
borderRadius: "50%",
opacity: ".5"
}, 1000,function () {
$(this).animate({
left: "-=150",
borderRadius: "0",
opacity: "1"
}, 1000)
});
box3.animate({
left: "-=150",
borderRadius: "50%",
opacity: ".5"
}, 1000, function () {
$(this).animate({
left: "+=150",
borderRadius: "0",
opacity: "1"
},1000)
});
box4.animate({
top: "-=150",
borderRadius: "50%",
opacity: ".5"
}, 1000,function () {
$(this).animate({
top: "+=150",
borderRadius: "0",
opacity: "1"
}, 1000)
});
}
setInterval(function () {
animaDiv();
}, 2000);
</script>
</body>
</html>
正在回答 回答被采纳积分+1
兄弟，我的轮播测试也这样，好像是浏览器解析机制的问题，你可以看看这个：
https://www.cnblogs.com/joyco773/p/6038022.html
你这道题没问题，就是在定时器里面执行animate动画。
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星