Question

我试图以可预测的方式移动某些元素，但结果却出乎意料。

当您一次按下“向下”按钮时，一旦div不返回其原始位置，则再次按下“向上”按钮。

当元素明显位于两个不同的位置时，为什么Y坐标以29开头和结束？

HTML
<button id='btn-up'>Up</button>
<button id='btn-down'>Down</button>
<span class='text'>Y coordinate: <span id="yCoord"></span></span>

<div id="myItem" class="moveItem"></div>


CSS
.text {
  font-family: arial;
  padding-left: 30px;
}

#myItem {
  background-color: red;
  height: 50px;
  width: 50px;
  margin-top: 0px;
}

.moveItem {
  transition: transform .25s ease-in-out;
}


JAVSCRIPT
const pixelDistance = 50;
var currentY = $('#myItem').position().top;

$('#yCoord').text(currentY);

$("#btn-up").on('click', function() {
currentY = currentY - pixelDistance;

$('#myItem').css('transform', 'translateY(' + currentY + 'px)');

$('#yCoord').text(currentY);
});

$("#btn-down").on('click', function() {
currentY = currentY + pixelDistance;

    $('#myItem').css('transform', 'translateY(' + currentY + 'px)');

$('#yCoord').text(currentY);  
});

参考代码：https://jsfiddle.net/tsf9bz27/

Answer 1

您只在代码的开头阅读currentY，而不是每次单击都阅读。因此原来的Y会套用在「up」上，而不套用在目前的值上。

Answer 2

问题是您要检索最高位置并将其添加为transformY，这会弄乱第一步。

const pixelDistance = 50;
var currentY = $('#myItem').position().top;
var pos = 0;

$('#yCoord').text(currentY);

$("#btn-up").on('click', function() {
  currentY = currentY - pixelDistance;
    pos = pos - pixelDistance;

  $('#myItem').css('transform', 'translateY(' + pos + 'px)');

  $('#yCoord').text(currentY);
});

$("#btn-down").on('click', function() {
  currentY = currentY + pixelDistance;
    pos = pos + pixelDistance;

	$('#myItem').css('transform', 'translateY(' + pos + 'px)');
  
  $('#yCoord').text(currentY);  
});

.text {
  font-family: arial;
  padding-left: 30px;
}

#myItem {
  background-color: red;
  height: 50px;
  width: 50px;
  margin-top: 0px;
  transition: transform .25s ease-in-out;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='btn-up'>Up</button>
<button id='btn-down'>Down</button>
<span class='text'>Y coordinate: <span id="yCoord"></span></span>

<div id="myItem" class="moveItem"></div>

Answer 3

有一些奇怪的现象会干扰您的Y值。这是一个经过修饰的提琴，其行为可能与您期望的一样：https://jsfiddle.net/c9wy3kjd/

1）按钮和“ Y坐标”文本位于<div>的顶部。这些项目将div向下推一些距离。为了解决这个问题，我将按钮和文本放在容器中，并将其绝对定位为“从流中删除”。如果那没有意义，请阅读CSS positioning。

2）浏览器通常在页面的body元素中插入一点空白，以使文本远离边缘。这使Y值增加了约8px。删除起来很简单，因此我还添加了一个body { margin: 0 }规则来删除它。

为什么此元素行进两个不同的距离？

3 个答案: