jQuery Exercises

Go to the GitHub repo.

Exercise 1: In the HTML file, replace the div (class = "pushy fadeitem") with any Vancouver image from the /images/ folder. Get the image to fade in/out exactly like the div does.

Exercise 2: Use the way fadeOut() works to create a simple photo viewer. Hint: append() will help you!

Exercise 3: Use toggle() to make a nice formatted info box appear when you hover on any boldface name in a story.

hideslidefade Exercise: Experiment with toggle functions that hide, slide or fade objects on the page.

slideToggle Exercise: Making an accordion-style menu is easier than you think.

Drag exercise: Learn how to use mouseup and mousedown. Even better, learn how to make something follow your cursor around the screen!

Animate exercise: Use the arrow keys to make an image move up, down, right, or left. Of course, jQuery can also make things move without any keys being pressed!

Interactive table exercise: Let's say you are trying to memorize all the state capitals. You could use flash cards ... or you could use jQuery! This exercise shows how traversing the DOM can save you from a lot of markup. You don't need to put a class on every cell or every column in the table, because jQuery can find the exact cell you want.