@N7EIght

Как остановить движение объекта, при отпускании кнопки?

<div class="player">
	<!-- Персонаж -->
</div>


.player {
	border: 1px solid black;
	width: 6%;
	height: 17.3%;
	background: url(img/start.png) no-repeat;
	position: absolute;
	bottom: 15%;
	left: 68%;
	/*left: 46%;*/
	z-index: 3;
	transition: bottom .20s ease-in-out, left .5s linear;
}


document.onkeydown = function(e) { 

	if (e.keyCode == 37) {
		posX = document.querySelector('.player').offsetLeft;
		xn = posX - 150; 
		document.querySelector('.player').style.left = xn + 'px';
	}

}

document.onkeyup = function(e) {

	if (e.keyCode == 37) {
		// Что тут писать???
	}

}


Что нужно дописать в onkeyup, чтобы объект сразу же останавливался когда отпустишь кнопку? В данный момент, когда я удерживаю и потом отпускаю кнопку, объект ещё продолжает сдвигаться на 150px
  • Вопрос задан
  • 161 просмотр
Пригласить эксперта
Ответы на вопрос 2
Sergamers
@Sergamers
front-end
тебе изменение анимации нужно вешать на таймер по типу сет тайм аут и добавлять расстояние по чуть-чуть, а на отжатие отменять таймер чтоб остановилось на последней отметке
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Ничего не надо останавливать, потому что оно само остановится. Причиной твоей проблемы является то, что ты наговнокодил, и при каждом срабатывании события, ты дергаешь элемент из dom, а тебе надо в самом начале лишь сделать на него ссылку, и работать с ней.

Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы