• Choose a category
• All
• Classic-Fiction

The most critical part of the HTML from a programming perspective is the inclusion of the ID attribute. This makes it easy for a jQuery script to manipulate the component, making it hide and reappear in various ways. Note that the HTML and CSS do nothing to hide the content. It will be hidden (and revealed) entirely through jQuery code.

Initializing the page

The initialization sequence simply sets the stage and assigns a series of event handlers:

$(init);

function init(){

//styleContent();

$(“#content”).hide();

$(“#show”).click(showContent);

$(“#hide”).click(hideContent);

$(“#toggle”).click(toggleContent);

$(“#slideDown”).click(slideDown);

$(“#slideUp”).click(slideUp);

$(“#fadeIn”).click(fadeIn);

$(“#fadeOut”).click(fadeOut);

} // end init

The pattern for working with jQuery should be familiar:

1. Set up an initialization function.

Use the $(document).ready() mechanism (described in Chapter 2 of this minibook) or this cleaner shortcut to specify an initialization function.

2. Hide the content div.

When the user first encounters the page, the content div should be hidden.

3. Attach event handlers to each h2 button.

This program is a series of small functions. The init() function attaches each function to the corresponding button. Note how I carefully named the functions and buttons to make all the connections easy to understand.

Hiding and showing the content

All the effects on this page are based on hiding and showing the content div. The hide() and show() methods illustrate how jQuery animation works:

function showContent(){

$(“#content”).show();

} // end showContent

function hideContent(){

$(“#content”).hide();

} // end hideContent

Each of these functions works in the same basic manner:

♦ Identifies the content div: Creates a jQuery node based on the content div.

♦ Hides or shows the node: The jQuery object has built-in methods for hiding and showing.

The hide and show methods act instantly. If the element is currently visible, the show() method has no effect. Likewise, hide() has no effect on an element that’s already hidden.

Toggling visibility

In addition to hide() and show(), the jQuery object supports a toggle() method. This method takes a look at the current status of the element and changes it. If the element is currently hidden, it becomes visible. If it’s currently visible, it is hidden. The toggleContent() function illustrates how to use this method:

function toggleContent(){

$(“#content”).toggle();

} // end toggleContent

Sliding an element

jQuery supports effects that allow you to animate the appearance and disappearance of your element. The general approach is very similar to hide() and show(), but you find one additional twist:

function slideDown(){

$(“#content”).slideDown(“medium”);

} // end slideDown

function slideUp(){

$(“#content”).slideUp(500);

} // end slideUp

The slideDown() method makes an element appear like a window shade being pulled down. The slideUp() method makes an element disappear in a similar manner.

These functions take a speed parameter that indicates how quickly the animation occurs. If you omit the speed parameter, the default value is medium. The speed can be these string values:

♦ Fast

♦ Medium

♦ Slow

♦ A numeric value in milliseconds (1⁄1000 of a second; the value 500 means 500 milliseconds, or half a second)

The show(), hide(), and toggle() methods also accept a speed parameter. In these functions, the object shrinks and grows at the indicated speed.

A slideToggle() function is also available that toggles the visibility of the element, but using the sliding animation technique.

Fading an element in and out

A third type of “now you see it” animation is provided by the fade methods. These techniques adjust the opacity of the element. The code should look quite familiar by now:

function fadeIn(){

$(“#content”).fadeIn(“slow”, present);

}