如何在每个div转换之间放置间隔

我正在尝试使移动div转换的方式为每隔一秒钟执行一次。但是当我连续放置5个步骤时，div只是一步一步地从其初始位置移动到其最终位置，而没有任何间隔。我试图在1秒后的每个步骤中调用setInterval函数，但这不起作用。如何在每个div转换之间放置间隔

$(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>

来源

2016-08-15 suchit

欢迎堆栈溢出！我编辑了你的问题来改进代码缩进。编辑代码片段时，您可以轻松完成此操作：选择代码并按Shift + Tab。 – trincot

您可以使用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() { 
 
\t $('#executeButton').click(function() { 
 
     test(); 
 
    }); 
 
    \t function coords(dx, dy) { 
 
    \t var cx = document.getElementById('block').style.marginLeft; 
 
    \t var cy = document.getElementById('block').style.marginTop; 
 
    \t cx = parseInt(cx) + 40 * dx; 
 
    \t cy = parseInt(cy) + 40 * dy; 
 
    \t if (cx < 0) cx = 0; 
 
    \t if (cy < 0) cy = 0; 
 
    \t if (cx > 360) cx = 360; 
 
    \t if (cy > 360) cy = 360; 
 
    \t document.getElementById('block').style.marginLeft = cx + 'px'; 
 
    \t 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 { 
 
\t 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); 
 
    \t background-size: 40px 40px, 40px 40px; 
 
    \t border-style: solid; 
 
    \t float: left; 
 
    \t margin-right: 10px; 
 
} 
 

 

 
#block { 
 
    width: 40px; 
 
    height: 40px; 
 
    float: left; 
 
    \t transition: 1s; 
 
    \t background-color: red; 
 
\t outline: 1px solid; 
 
} 
 

 
#character { 
 
\t width: 50px; 
 
    height: 50px; 
 
    outline: 1px solid; 
 
    float: left; 
 
\t background-color: red; 
 
    \t 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"> 
 
\t <div id="block" style="margin-left: 40px; margin-top: 40px;"> 
 
\t </div> 
 
</div> 
 
</div> 
 
</body> 
 
</html>

来源

2016-08-15 16:12:27 eisbehr

谢谢eisbehr，非常感谢，它工作完美。 – suchit

不客气，@suchit！ – eisbehr

嗨@eisbehr，我不知道如何发送消息在stackoverflow，但你可以请看看这个http://stackoverflow.com/questions/39119523/how-to-check-if-one-div-重叠 - 另一个在过渡期间从一个位置t/ – suchit

如何在每个div转换之间放置间隔

回答

相关问题