1
votes

Pourquoi cet élément parcourt-il deux distances différentes?

J'essaie de déplacer certains éléments de manière prévisible, mais j'obtiens des résultats inattendus.

Lorsque vous appuyez une fois sur le bouton "Bas", le bouton "Haut" une fois que le div ne revient pas à son emplacement d'origine .

Pourquoi la coordonnée Y commence et se termine par une valeur de 29 alors que l'élément est clairement à deux endroits différents?

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);  
});

Code de référence: https://jsfiddle.net/tsf9bz27/

javascript jquery html css

1 commentaires

Parce que la première fois que vous commencez à $ ('# myItem'). Position (). Top; , qui n'est pas 0 mais 29, le premier mouvement est 29 + 50 (si bas) mais le second n'est que de 50. Si vous lisez ici, cela explique pourquoi le premier est ce qu'il est: api.jquery.com/position

3 Réponses :

0
votes

Vous ne lisez currentY qu'au début de votre code, pas à chaque clic. Ainsi, le Y d'origine est appliqué sur "up", pas la valeur actuelle.

0 commentaires

0
votes

Le problème est que vous récupérez la première position et que vous ajoutez le translateY qui gâchera le premier coup

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

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

#myItem {
  background-color: red;
  height: 50px;
  width: 50px;
  margin-top: 0px;
  transition: transform .25s ease-in-out;
  
}

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);  
});

1 commentaires

Faites une erreur aussi flagrante. Merci Chiller!

0
votes

Il y a quelques bizarreries qui gâchent votre valeur Y. Voici un violon modifié qui se comporte probablement comme prévu: https://jsfiddle.net/c9wy3kjd/

1) Les boutons et le texte "coordonnée Y" se trouvent au-dessus de votre

. Ces éléments poussent le div sur une certaine distance. Pour résoudre ce problème, j'ai mis les boutons et le texte dans un conteneur et je l'ai positionné de manière absolue pour "le retirer du flux". Si cela n'a pas de sens, lisez l'article sur le positionnement CSS .

2) Les navigateurs injectent souvent une petite marge dans l'élément body d'une page pour éloigner le texte des bords. Cela ajoutait environ 8 pixels à la valeur Y. C'est simple à supprimer, j'ai donc également ajouté une règle body {margin: 0} pour supprimer cela.

0 commentaires