fbpx

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:

$("#searchResults").toggle("slow");

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:

Visionfriendly.com

Visionfriendly.com

VisionFriendly.com has been building successful websites for over 20 years and covers all areas of website design, development and marketing with creative custom web designs and a robust in-house team of programmers to get your web marketing to work exactly the way you need it to.

Share On:

Share on facebook
Share on twitter
Share on linkedin

Comments:

Leave a Comment

Your email address will not be published. Required fields are marked *

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

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.

Let’s start a Conversation