jQuery 1.4 Animation Techniques Beginner's Guide

Time for action – adding keyboard events

The following code enables keyboard driven animations:

$(document).keydown(function(e) {

  if (e.keyCode === 37 || e.keyCode === 39) {

    message.fadeOut("slow");

    if (!scroller.is(":animated")) {
      scroller.stop().animate({
        left: (e.keyCode === 37) ? 0 : -(scroller.width() - prox.width())
      }, 6000, "linear");
    }
  }
}).keyup(function() {
  scroller.stop();
});

What just happened?

We attach the keydown event handler to the document object so that the visitor doesn't have to focus the proximity container somehow. Within the anonymous function, we first check whether the left or right arrow keys were pressed.

The key code 37 refers to the left arrow key and the code 39 refers to the right arrow key. The keyCode property ...