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 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>) simultaneously make it fade to 25% opacity and get a left margin of 20px, then when this is complete, fade the speech text to 50% 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).