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

Question

[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

Answer 1

[Сергей]

тебе изменение анимации нужно вешать на таймер по типу сет тайм аут и добавлять расстояние по чуть-чуть, а на отжатие отменять таймер чтоб остановилось на последней отметке

Comments

[N7EIght]

а можете пример показать? просто я уже где только таймер не пробовал, так и не получалось

[N7EIght]

document.onkeydown = function(e) { 

	if (e.keyCode == 37) {
		posX = document.querySelector('.player').offsetLeft;
		xn = posX - 50; 
		var timerId = setTimeout(function() {
			document.querySelector('.player').style.left = xn + 'px';
		}, 0);
	}

}

document.onkeyup = function(e) {

	if (e.keyCode == 37) {
		clearTimeout(timerId);
	}

}

так?

[Сергей]

N7EIght, jquery animate/stop посмотри как работает.

[Сергей]

N7EIght, Перенеси пример https://jsfiddle.net/ я подправлю

[N7EIght]

Сергей, А я JQuery не знаю

[N7EIght]

Мне бы на чистом JS

[N7EIght]

https://jsfiddle.net/o91bce6w/

[Сергей]

N7EIght, https://jsfiddle.net/tnh9ja1m/

[Сергей]

N7EIght, https://learn.javascript.ru/js-animation

Answer 2

[profesor08]

Ничего не надо останавливать, потому что оно само остановится. Причиной твоей проблемы является то, что ты наговнокодил, и при каждом срабатывании события, ты дергаешь элемент из dom, а тебе надо в самом начале лишь сделать на него ссылку, и работать с ней.