Exercise Tuesday

Important Note: To use the jQuery Methods fadeIn(), fadeOut(), slideDown(), or slideUp() you will need two separate click() JavaScript events (One for the in/out or down/up) whereas toggle() only requires one click() event.

Goal: In the Simple effects video, we learned:

  • How to show and hide elements using show() and hide()
  • How to toggle with toggle()
  • How to style a link with CSS
  • How to use <span> tags to limit the scope of CSS and JavaScript
  • Classes are used for elements that show up in multiple places on our web page
  • IDs are used for an element that shows up only once on our web page
  • When we use JavaScript to manipulate a web page, we are really manipulating the DOM, not just the HTML structure or styling.

Now, let's begin to familiarize ourselves with jQuery by completing the exercises detailed below.

Warm Up


  • How do we tell jQuery which part of the page to add an effect to? What does the code look like?
  • What is the DOM? How do we interact with it?
  • When do we use an id? What about a class?

Code


jQuery Effects Practice

  • On the walrus page, add some clickable text that alternates between saying "Hide/show images", and toggles the images appropriately.
  • On either the walrus page or the webpage from the previous exercise, try fading and sliding elements with fadeIn(), fadeOut(), fadeToggle(), slideDown(), slideUp(), and slideToggle().
  • Make a webpage with a few different sections, where a few of the sections are hidden by default, with a bit of teaser text that expands when you click on it (e.g., "Click to learn about the giant sandcastles of this fabulous country!"). Be creative!