dguajardo/jquery-exercises

Ejercicios de jQuery

jQuery Exercises

Download the complete repo and use index.html to view all pages.

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. Main file: ex01.html

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

Exercise 3: Use toggle() to make a nice formatted info box appear when you hover on any boldface name in a story. 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! 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! 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. Main file: states.html

BONUS Inside the /css_animation/ folder, you'll find an example that does not use any jQuery.