Почему объект не двигается одновременно в право-лево, верх-низ?

Question

[Pavlenty0]

Когда нажимаю клавишу, которая двигает машину вверх, вниз её уже нельзя сдвинуть.
Если, например нажимаю клавишу которая двигает машину вправо - влево она уже не едет.
Как исправить?

Вот сам код:

var car = $('#car')  
$(document).keyup(function(e) {
	if (e.keyCode == 68) {
		car.animate({'left': '+=50'},350);
	}
	else if (e.keyCode == 83) {
		car.animate({'top': '+=50'},350);
	}
	else if (e.keyCode == 87) {
		car.animate({'bottom': '+=50'},350);
	}
	 else if (e.keyCode == 65) {
		car.animate({'right': '+=50'},350);
	}
});

Comments

[artloveyou]

что-то с самой car.animate, потому что кнопки нормально отрабатывают https://jsfiddle.net/dae4qLpt/

[Pavlenty0]

artloveyou, не понял. Смотри, я нажимаю на кнопку "w" (передвинуть вверх). После этого, при нажатии на кнопку "s" (которая передвигает вниз), она просто не работает. Если нажму сначала "s" , то "w" не будет работать и т.д.

[artloveyou]

Pavlenty0, Попробуй вот так у себя в коде прописать и посмотри в консоли что у тебя будет после нажатия клавиш. Должно после каждого нажатия в консоль писать какую клавишу нажал, то есть обработка клавиш нормально происходит

var car = $('#car')  
$(document).keyup(function(e) {
  if (e.keyCode == 68) {
  console.log("d")
    car.animate({'left': '+=50'},350);
  }
  else if (e.keyCode == 83) {
  console.log("s")
    car.animate({'top': '+=50'},350);
  }
  else if (e.keyCode == 87) {
  console.log("w")
    car.animate({'bottom': '+=50'},350);
  }
   else if (e.keyCode == 65) {
  console.log("a")
    car.animate({'right': '+=50'},350);
  }
});

а анимэйт я ещё не использовал, сейчас попробую

Answer 1

[Absolute138]

var car = $('#car');  
$(document).keyup(function(e) {
  if (e.keyCode == 68) {
    car.animate({'left': '+=50'},350);
  }
  else if (e.keyCode == 83) {
    car.animate({'top': '+=50'},350);
  }
  else if (e.keyCode == 87) {
    car.animate({'top': '-=50'},350);
  }
   else if (e.keyCode == 65) {
    car.animate({'left': '-=50'},350);
  }
});

Comments

[Pavlenty0]

Спасибо! Как же я сам не додумался)

[Steppp]

csstransform: rotate(90deg)