The task is to move an element to left, right, up and down using arrow keys in jquery, we can use the jQuery keydown() method along with the .animate() method.
The keydown() method triggers the keydown event whenever User presses a key on the keyboard.
- The .keydown() method is to used check whether any key is pressed or not, and return which key is pressed.
- Checking which key is triggered is determined by keycodes. Keycodes are followed:
- left = 37
- up = 38
- right = 39
- down = 40
- The movement of the element according to the key pressed is done using .animate() method
Example 1: Moving element to up using Up arrow key.
Example 2: Moving element to Down using Down arrow keys.
Example 3: Moving element to Left using Left arrow keys.
Example 4: Moving element to Right using Right arrow keys.
- How to create slide left and right toggle effect using jQuery?
- How to distinguish left and right mouse click using jQuery?
- How to align flexbox columns left and right using CSS ?
- jQuery | Move an element into another element
- How to select first element in the drop-down list using jQuery ?
- How to scroll the page up or down using anchor element in jQuery ?
- .pull-left and .pull-right classes in Bootstrap 4
- How to decorate list bullets in arrow using CSS ?
- Difference between regular functions and arrow functions
- How to change selected value of a drop-down list using jQuery?
- How to get selected text from a drop-down list using jQuery?
- How to generate a drop down list of timezone using PHP ?
- How to create a group of related options in a drop-down list using HTML ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.