第二遍动画执行的2s 是不是也在定时器第二次4s内
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<style>
div{
opacity:.6;
}
.red {
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 100px;
background-color: red;
}
.orange {
width: 50px;
height: 50px;
position: absolute;
left: 100px;
top: 200px;
background-color: orange;
}
.green {
width: 50px;
height: 50px;
position: absolute;
left: 300px;
top: 200px;
background-color: green;
}
.blue {
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 300px;
background-color: blue;
}
</style>
<body>
<div class="red"></div>
<div class="orange"></div>
<div class="green"></div>
<div class="blue"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(function(){
var red = $('.red');
var orange = $('.orange');
var green = $('.green');
var blue = $('.blue');
function myAnimation() {
red.animate({
top: '+=150',
borderRadius: '25'
}, 1000).animate({
top: '-=150',
borderRadius: '0'
}, 1000);
blue.animate({
top: '-=150',
borderRadius: '25'
}, 1000).animate({
top: '+=150',
borderRadius: '0'
}, 1000);
orange.animate({
left: '+=150',
borderRadius: '25'
}, 1000).animate({
left: '-=150',
borderRadius: '0'
}, 1000);
green.animate({
left: '-=150',
borderRadius: '25'
}, 1000).animate({
left: '+=150',
borderRadius: '0'
}, 1000);
}
// myAnimation();
setInterval(myAnimation, 4000);
})
</script>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星