Exercice 4.4: keyboard-controlled smooth div moves.

Chapter 4/04.js

@@ -80,4 +80,23 @@ $(document).ready(function () {
       $('.speech').animate({'opacity': '0.5'}, 'slow');
     });
   });
+
+  var $switcher = $('#switcher');
+  // Make the switcher movable, and readable even over other text.
+  $switcher.css({
+    position: 'relative',
+    backgroundColor: 'white',
+    opacity: 0.8
+  });
+  $(document).keydown(function (event) {
+    var move;
+    switch (event.which) {
+      case 37: move = {left: '-=20px'}; break;
+      case 38: move = {top: '-=20px'}; break;
+      case 39: move = {left: '+=20px'}; break;
+      case 40: move = {top: '+=20px'}; break;
+    }
+    $switcher.animate(move, 'fast');
+  });
+
 });