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


jQuery Effects are a group of methods in the jQuery library that are responsible for adding dynamic behavior to websites. You may have seen many of these effects on modern websites without even realizing it. For example, you are seeing jQuery Effects in action when drop-down menus slide into place or a warning message appears after entering an incorrect password.

While adding dynamic behavior is possible using only JavaScript, the code to do so is somewhat long and confusing. The beauty of jQuery is how one or two lines of jQuery can replace long JavaScript code blocks.

In this course, you'll learn how to make elements appear and disappear, fade in and out, and slide around the page. Let's get started!


Click on some of the buttons on the website to the right. Test out the Menu and Login buttons, the arrows beneath each pair of shoes, and the shoe size buttons. Each button applies a different jQuery Effect!

Report a Bug
If you see a bug or any other issue with this page, please report it here.