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 |
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.