Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
Learn jQuery: Effects

Review: Effects

Wow! You've completed this table of 9 different jQuery effects. Great job! To review, the methods that we learned were:

  • .hide()
  • .show()
  • .toggle()

These methods instantly hide or show elements on a web page.

  • .fadeOut()
  • .fadeIn()
  • .fadeToggle()

These methods make elements disappear or appear over a given period of time.

  • .slideUp()
  • .slideDown()
  • .slideToggle()

These methods make elements slide up or down into place over a given period of time.

Using these effects, you can make your web pages eye-catching and dynamic. And thanks to the magic of jQuery all of this can be done with very few lines of code!


Your table is complete. Congratulations! Now take some time to tweak it and make it your own.

  • Can you change your code so a button applies its effect to all 3 images?
  • Can you make every button apply its effect to only the first image?
  • What happens when you apply effects one after another? For example, what happens when you apply .slideUp(), then .hide(), then .slideDown() to an image?
Report a Bug
If you see a bug or any other issue with this page, please report it here.