When a user clicks, I need this image to smoothly transition to the click location. Using only Javascript results in the image appearing at the new location without any transition effects.
<body>
<img id="player" src="images/man.png"></img>
<script>
var x_click;
var y_click;
var player = document.getElementById("player");
document.addEventListener("click", move_player)
function move_player(e) {
x_click = e.clientX;
y_click = e.clientY;
player.style.left = x_click - player.clientWidth/2 + "px";
player.style.top = y_click - player.clientHeight/2 + "px";
}
</script>
</body>
To add a transition effect, I included the following CSS:
position: relative;
transition: left 0.5s linear, top 0.5s linear;
The issue is that the speed of movement remains constant. Whether moving 300px or 1000px, it consistently takes 0.5 seconds. My goal is for the speed to vary based on distance: covering 1000px should take significantly longer than 300px. How can I accomplish this using pure Javascript, without relying on external libraries like JQuery?