Now, we'll be enabling keyboard-driven animations. We'll specifically be adding triggers for the left and right arrow keys on the keyboard.
Add the following code below the prox.mouseleave
function that we just added in the preceding section:
$(document).keydown(function(e) { //37 = left arrow | 39 = right arrow 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(); });
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...