Download the complete repo and use index.html to view all pages. Or view them live here. All pages adapt to mobile, although some jQuery effects will not work, as noted below.
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. (.hover does not work on mobile.) Main file: ex01.html
Exercise 2: Use the way .fadeOut() works to create a simple photo viewer — with some help from CSS. Main file: ex02.html
Exercise 3: Use .toggle() and data- attributes to make a nice formatted info box appear when you hover on any boldface name in a story. (Note: This is specially adapted for small mobile screens.) Main file: ex03.html
hideslidefade Exercise: Experiment with toggle functions that hide, slide or fade objects on the page. Main file: hideslidefade.html
slideToggle Exercise: Making an accordion-style menu is easier than you think. Main file: slideToggle.html
Drag exercise: Learn how to use mouseup and mousedown. Even better, learn how to make something follow your cursor around the screen! (Dragging does not work on mobile.) Main file: drag.html
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! (Does not work on mobile — because no arrow keys!) Main file: animate.html
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. (Note: This is specially adapted for small mobile screens.) Main file: states.html
BONUS Inside the /css_animation/ folder, you'll find an example that does not use any jQuery.