如何在每個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轉換之間放置間隔

回答

相關問題