Exercises

To complete these exercises, you will need the index.html file for this chapter as well as the finished JavaScript code as found in complete.js. These files can be downloaded from the Packt Publishing website at http://www.packtpub.com/support.

The challenge exercise may require the use of the official jQuery documentation at http://api.jquery.com/:

1. Alter the stylesheet to hide the contents of the page initially. When the page is loaded, fade in the contents slowly.

2. Give each paragraph a yellow background only when the mouse is over it.

3. Make a click of the title (<h2>) and simultaneously fade it to 25 percent opacity and grow its left-hand margin to 20px. Then, when this animation is complete, fade the speech text to 50 percent opacity.

4. Challenge: React to presses of the arrow keys by smoothly moving the switcher box 20 pixels in the corresponding direction. The key codes for the arrow keys are: 37 (left), 38 (up), 39 (right), and 40 (down).