Move image with arrow keys

Basic jQuery example

by James Connolly

HTML

<h1>Use the arrow keys to move the zebra</h1>
<p>Zebras are several species of African equids (horse family) united by their distinctive black and white striped coats. Their stripes come in different patterns, unique to each individual. They are generally social animals that live in small harems to large herds. Unlike their closest relatives, horses and donkeys, zebras have never been truly domesticated.</p>

<img id="zebra" src="http://macloo.com/images/african_animals/zebra.png" alt="Zebra">

<p>There are three species of zebras: the plains zebra, the Grévy's zebra and the mountain zebra. The plains zebra and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus Dolichohippus. The latter resembles
  an ass, to which it is closely related, while the former two are more horse-like. All three belong to the genus Equus, along with other living equids. Thank you, <a href="https://en.wikipedia.org/wiki/Zebra" target="_blank">Wikipedia</a>.</p>

CSS

#zebra {
  position: relative;
  left: 30%;
  top: 0;
}

JavaScript

// use the arrow keys to move the zebra with a switch statement 

$(document).on('keydown', function(e) {
  // e stands for "event" - the event is the keypress 
  // e.key means the key that was pressed

  switch (e.key) {

    // left arrow pressed
    case "ArrowLeft":
      $('#zebra').animate({
        left: "-=10px"
      }, 'fast');
      break;
      
      // right arrow pressed
    case "ArrowRight":
      $('#zebra').animate({
        left: "+=10px"
      }, 'fast');
      break;
  }
});