Order Description

study code at this link: http://book.learningjquery.com/6549/codebrowser/#4.27

Create a project with the final code (see left panels for HTML, CSS and JavaScript; use the latest jQuery and jQuery UI files) and then complete the steps below with jQuery (links: jQuery documentation (Links to an external site.)Links to an external site., cheat sheet (Links to an external site.)Links to an external site.):

1. When the page is loaded the contents should be initially hidden, and then fade in slowly.

2. When a paragraph is moused over it should become yellow. When it’s moused off it should get back to its previous background.

3. Use alternate clicks (example: data file in Chapter 6, easing_example2.html) A click on the title () should simultaneously fade it to 25% opacity and set its left margin to 50px using the easing 'easeInBounce', then (meaning after the first animation is complete) it should fade the speech text (

) to 50% opacity (hint: use fadeTo()). Another click should fade and position them back in reverse order: the speech text should fade back to its initial opacity, then the title should get back to its opacity and left positioning, only this time use the easing method easeOutBounce'. For all effects and animations use 'slow' for the duration.

4. When an arrow key is pressed (key codes for arrow keys: 37 for left, 38 for up, 39 for right, 40 for down) the switcher box (

) should smoothly move 20 pixels in the corresponding direction.

5. Add another effect of your choice with comments.

You can inspire from textbook, online resources and code but always be sure you submit your original work. Add a block of comments at the beginning with your name, date, and what the script is supposed to do. Use additional comments to document your code and make it easier to read. Use the browser Console to track down any errors and debug your program. Test your web page to be sure it functions as intended.