我正在尝试以这样的方式进行移动 div 转换，即它以一秒的间隔执行每一步。但是当我将 5 个连续的步骤放在一起时，div 只是一步从其初始位置移动到最终位置，没有任何间隔。我尝试放置一个 setInterval 函数以在 1 秒后在每个步骤中调用，但这没有用。
$(document).ready(function() {
$( function() {
$('#executeButton').click(function() {
test();
});
function coords(dx, dy) {
var cx = document.getElementById('block').style.marginLeft;
var cy = document.getElementById('block').style.marginTop;
cx = parseInt(cx) + 40 * dx;
cy = parseInt(cy) + 40 * dy;
if (cx < 0) cx = 0;
if (cy < 0) cy = 0;
if (cx > 360) cx = 360;
if (cy > 360) cy = 360;
document.getElementById('block').style.marginLeft = cx + 'px';
document.getElementById('block').style.marginTop = cy + 'px';
}
function test(){
move('4');
move('4');
move('4');
move('2');
move('2');
}
function move(id) {
if (id == '1') {
coords('0','-1');
} else if (id == '2') {
coords('0','1');
} else if (id == '3') {
coords('-1','0');
} else if (id == '4') {
coords('1','0');
}
}
});
});#panel {
width: 100%;
height: 100%;
border-style: solid;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#game {
width: 400px;
height: 400px;
background-image: linear-gradient(transparent 39px, #888 39px, transparent 40px), linear-gradient(90deg, transparent 39px, #888 39px, transparent 40px);
background-size: 40px 40px, 40px 40px;
border-style: solid;
float: left;
margin-right: 10px;
}
#block {
width: 40px;
height: 40px;
float: left;
transition: 1s;
background-color: red;
outline: 1px solid;
}
#character {
width: 50px;
height: 50px;
outline: 1px solid;
float: left;
background-color: red;
transition: 1s;
}<html>
<head>
<link rel="stylesheet" href="movefunction.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="movecharacter.js"></script>
</head>
<body>
<button id="executeButton">Execute</button>
<div id="panel">
<div id="game">
<div id="block" style="margin-left: 40px; margin-top: 40px;">
</div>
</div>
</div>
</body>
</html>最佳答案
您可以使用setTimeout 来定义移动的开始延迟。
function test(){
move(4); // instant start
setTimeout(move, 2000, 4); // + 1s transition + 1s delay
setTimeout(move, 4000, 4); // + 1s transition + 1s delay
setTimeout(move, 6000, 2); // + 1s transition + 1s delay
setTimeout(move, 8000, 2); // + 1s transition + 1s delay
}
$(document).ready(function() {
$( function() {
$('#executeButton').click(function() {
test();
});
function coords(dx, dy) {
var cx = document.getElementById('block').style.marginLeft;
var cy = document.getElementById('block').style.marginTop;
cx = parseInt(cx) + 40 * dx;
cy = parseInt(cy) + 40 * dy;
if (cx < 0) cx = 0;
if (cy < 0) cy = 0;
if (cx > 360) cx = 360;
if (cy > 360) cy = 360;
document.getElementById('block').style.marginLeft = cx + 'px';
document.getElementById('block').style.marginTop = cy + 'px';
}
function test(){
move(4);
setTimeout(move, 2000, 4);
setTimeout(move, 4000, 4);
setTimeout(move, 6000, 2);
setTimeout(move, 8000, 2);
}
function move(id) {
if (id == '1') {
coords('0','-1');
} else if (id == '2') {
coords('0','1');
} else if (id == '3') {
coords('-1','0');
} else if (id == '4') {
coords('1','0');
}
}
});
});#panel {
width: 100%;
height: 100%;
border-style: solid;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#game {
width: 400px;
height: 400px;
background-image: linear-gradient(transparent 39px, #888 39px, transparent 40px), linear-gradient(90deg, transparent 39px, #888 39px, transparent 40px);
background-size: 40px 40px, 40px 40px;
border-style: solid;
float: left;
margin-right: 10px;
}
#block {
width: 40px;
height: 40px;
float: left;
transition: 1s;
background-color: red;
outline: 1px solid;
}
#character {
width: 50px;
height: 50px;
outline: 1px solid;
float: left;
background-color: red;
transition: 1s;
}<html>
<head>
<link rel="stylesheet" href="movefunction.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="movecharacter.js"></script>
</head>
<body>
<button id="executeButton">Execute</button>
<div id="panel">
<div id="game">
<div id="block" style="margin-left: 40px; margin-top: 40px;">
</div>
</div>
</div>
</body>
</html>关于javascript - 如何在每个 div 转换之间放置间隔，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38958682/