Exercise 9-1 Experiment with animation In this exercise, you'll experiment with effects, animations, and casings. Review the application 1. Use your text editor or IDE to open the HTML, CSS, and JavaScript files in this folder: javascript_query exercises\ch09\animation 2. Run the application to see how it works. Note how the top-level heading is animated into view from off the page. Then, click on the FAQ headings to see what happens. Experiment with the effects for the FAQ headings 3. In the jQuery code, change the effects for the FAQ headings so the answers fade in and fade out of view when the headings are clicked. 4. Now.change the effects for the FAQ headings so the answers slide down and slide up when the headings are clicked. 5. Experiment with the durations and effects to see which ones you think are best for usability. Experiment with the h1 heading 6. Check the CSS for the h1 heading to see that it starts with its left property at minus 175 pixels. Then, check the jQuery code to see that it moves the left property 375 pixels to the right and then 200 pixels to the left, which means the left property ends at zero pixels. 7. Restart the application and note the animation as the h1 heading moves from off the page into its proper location. Then, click the heading to see that the animation is repeated, which moves the heading farther to the right. Click on it again to see that it's repeated, which moves the heading still farther. 8. Restart the application. Then, click on the top-level heading twice in rapid succession. This should run the animations twice in a row, which shows that the animations are queued. 9. Fix the animation for the top-level heading so it always returns to its proper location above the FAQs at the end of the animation. That way, it won't move across the page. To do that, set its ending left property to zero pixels. Add jQuery UI easings to the application 10. Note that there's a script element for the jQuery easing plugin in the HTML for the page. Then add the casings shown in figure 9-9 to the effects and animations. Does that improve them? II. After you run the application to see how those casings work, click on the link at the bottom of the page to view information about using the jQuery easing plugin. Note that this opens a new page or tab in your browser. Then, try some of the other casings to see how you like them