我有五个圆，我想每五秒钟旋转一次。例如
第一轮
1 2
3 4 5
5秒后
5 1
2 3 4
以此类推。
我希望这是一个动画，以便您可以直观地看到元素的位置变化。
这五个元素位于两行中，顶部2个，底部5个。我基本上希望元素1移动到元素2的位置，元素2移动到元素3，依此类推。我希望用户在页面上时继续执行此操作。我可以使用下面的代码使它立即执行一次，但是在第二次迭代中，元素开始不会到达应有的位置，而是开始在整个屏幕上飞行
我拥有的代码在第一个时间间隔内效果很好，但之后元素就随处可见。
这是我的JavaScript：
window.onload = function(){
$('#inst-container').trigger('inst.show');
}
$('#inst-container').on('inst.show', function(){
setInterval(function(){
gatherCoords();
moveCircles();
refreshRows();
}, 5000);
})
function gatherCoords(){
var circles = document.getElementById('inst-container').querySelectorAll('.inst-circle');
COORDINATES = [];
CIRCLES = [];
$.each(circles, function(idx, elem){
var coords = elem.getBoundingClientRect();
var coords2 = idx == 0?circles[circles.length-1].getBoundingClientRect():circles[idx-1].getBoundingClientRect();
//var coords2 = circles[map[idx]].getBoundingClientRect();
var top = coords.top - coords2.top;
var left = coords.left - coords2.left;
COORDINATES.push({top: coords.top , left: coords.left});
CIRCLES.push(elem);
});
console.log(circles);
//$(this).trigger('inst.shown');
}
function moveCircles(){
for(var i=0; i<CIRCLES.length; i++){
var coords = CIRCLES[i].getBoundingClientRect();
if(i==CIRCLES.length-1)
{
var top = COORDINATES[0].top - coords.top;
var left = COORDINATES[0].left - coords.left;
}
else{
var top = COORDINATES[i+1].top - coords.top;
var left = COORDINATES[i+1].left - coords.left;
}
$(CIRCLES[i]).css('position', 'relative');
$(CIRCLES[i]).animate({
top: top,
left: left
}, 3000, 'swing', function(){
$(CIRCLES[i]).css('position', 'static');
});
}
}
这是我的html：
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<div id="inst-container">
<div class="row">
<div class="text-center col-sm-4 col-sm-offset-2 inst-circle">
<div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 1
</div>
<p>
<strong>Circle 1 text</strong>
</p>
</div>
<div class="text-center col-sm-4 inst-circle">
<div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 2
</div>
<p>
<strong>Circle 2 text</strong>
</p>
</div>
</div>
<div class="row">
<div class="text-center col-sm-4 inst-circle">
<div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 3
</div>
<p>
<strong>Circle 3 text</strong>
</p>
</div>
<div class="text-center col-sm-4 inst-circle">
<div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 4
</div>
<p>
<strong>Circle 4 text</strong>
</p>
</div>
<div class="text-center col-sm-4 inst-circle">
<div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 5
</div>
<p>
<strong>Circle 5 text</strong>
</p>
</div>
</div>
</div>
答案 0 :(得分：1)
请尝试使用以下HTML和脚本。在这里，我已经更新了您的示例，并且如果您通过提供位置：绝对值来使用CSS进行对齐，那么它会很好地工作。
HTML
<div id="inst-container" style="position: relative">
<div class="text-center col-sm-4 inst-circle">
<div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 1
</div>
<p>
<strong>Circle 1 text</strong>
</p>
</div>
<div class="text-center col-sm-4 inst-circle">
<div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 2
</div>
<p>
<strong>Circle 2 text</strong>
</p>
</div>
<div class="text-center col-sm-4 inst-circle">
<div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 3
</div>
<p>
<strong>Circle 3 text</strong>
</p>
</div>
<div class="text-center col-sm-4 inst-circle">
<div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 4
</div>
<p>
<strong>Circle 4 text</strong>
</p>
</div>
<div class="text-center col-sm-4 inst-circle">
<div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 5
</div>
<p>
<strong>Circle 5 text</strong>
</p>
</div>
</div>
脚本
var COORDINATES = [];
var iteration=0;
window.onload = function(){
gatherCoords();
$('#inst-container').trigger('inst.show');
}
$('#inst-container').on('inst.show', function(){
setInterval(function(){
moveCircles(++iteration);
}, 1000);
})
function gatherCoords(){
var circles = document.getElementById('inst-container').querySelectorAll('.inst-circle');
var firstCirc = circles[0].getBoundingClientRect();
$.each(circles, function(idx, elem){
var nextCirc = elem.getBoundingClientRect();
COORDINATES.push({top: nextCirc.top , left: nextCirc.left});
});
startAnimation(); // Here I've called this function in order init animation by making all divs as absolute
}
function startAnimation(){
var circles = document.getElementById('inst-container').querySelectorAll('.inst-circle');
$.each(circles, function(i, elem){
$(elem).css({
"top": COORDINATES[i].top,
"left": COORDINATES[i].left,
"position": "absolute"
});
});
}
function moveCircles(count){
var circles = document.getElementById('inst-container').querySelectorAll('.inst-circle');
$.each(circles, function(index, elem){
var i = count + index;
var length = circles.length;
if(i>=length)
{
i%= length;
}
var top = COORDINATES[i].top;
var left = COORDINATES[i].left;
$(elem).animate({
top: top,
left: left,
complete: function(){
$(circles).css('position', 'absolute');
}
}, 2000, 'swing');
});
if(iteration > circles.length){
iteration%= circles.length;
}
}