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

suchit 发表于 Dev

这样的

我正在尝试以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>