Our Black Friday Sale has been extended!  View Sale

Basic jQuery Effects

Overlapping colored triangles

In this article, we continue our introduction to jQuery. Effects are easy and rewarding in jQuery, so we'll start there. In this article, you can see the basic jQuery effects in action: hide(), show(), toggle(), fadeOut(), and fadeIn(). We will apply each effect to the table below. The ID of the table is "searchResults", so that the CSS selector passed into the $ object is "#searchResults".
Click on each of the five buttons below to view the code for a particular jQuery effect, then click on the "See this in action" button to see the code in action.

Sample Search Results Table

Last Name First Name Age
Petersen Dave 31
Johnson Tim 25
Smith John 19
Doe Jane 38

See the code for this effect.


That's great. So what's next?

Why don't you try it yourself? Type some jQuery into the following box and click on "Execute"! A good place to start would be:


Try substituting "fast" for the fade speed. You can also pass in the number of milliseconds.

That's all for now! Next time, we will use jQuery to do some DOM and CSS manipulation.

About the Author:

Picture of Visionfriendly.com


VisionFriendly.com is a Chicago digital marketing agency with over 25 years of experience helping clients nationwide. We have an in-house team of marketers and creatives ready to improve your business’s marketing operations.

Share On:


Leave a Comment

Copyright © 2024, All Rights Reserved
Tri Colored Triangles
Scroll to Top

We’re Doing Something Awesome

VisionFriendly.com is now Blackbird Digital.

We are the same great people, with a new name, new website, and new ideas.

Take your business to the

Next Level!

Visionfriendly.com has the right team to make your business stand out from other professional websites.

Ready For Takeoff?

A Completely Customized
Digital Marketing Experience

  • We'll be in touch within one business day to discuss your goals and create a personalized plan that fits both you and your business.

  • This field is for validation purposes and should be left unchanged.

Let’s start a Conversation