Question

我正在尝试以这样的方式进行移动div转换，使得每一步都以一秒的间隔进行。但是当我将5个连续步骤放在一起时，div只需一步就从其初始位置移动到最终位置，而没有任何间隔。我尝试在1秒后在每个步骤中调用setInterval函数，但这不起作用。

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

如何在每个div过渡之间放置间隔

0 个答案: