You can use the jQuery keydown() method in combination with the animate() method to move an element such as <div> in left, right, up and down direction through pressing the corresponding arrow keys on the keyboard. Let's check out an example to see how this works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Move DIV Element with Arrow Keys</title>
<style>
.box{
width: 100px;
height: 100px;
position: relative;
margin: 200px auto 0;
background: yellowgreen;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).keydown(function(e){
switch (e.which){
case 37: //left arrow key
$(".box").finish().animate({
left: "-=50"
});
break;
case 38: //up arrow key
$(".box").finish().animate({
top: "-=50"
});
break;
case 39: //right arrow key
$(".box").finish().animate({
left: "+=50"
});
break;
case 40: //bottom arrow key
$(".box").finish().animate({
top: "+=50"
});
break;
}
});
</script>
</head>
<body>
<p><strong>Note:</strong> Click inside the viewport and press the arrow keys to move the box.</p>
<div class="box"></div>
</body>
</html>
Use the jQuery
keydown()
methodYou can use the jQuery
need an explanation for this answer? contact us directly to get an explanation for this answerkeydown()
method in combination with theanimate()
method to move an element such as<div>
in left, right, up and down direction through pressing the corresponding arrow keys on the keyboard. Let's check out an example to see how this works: