• Choose a category
• All
• Classic-Fiction

$("#panelAdvancedOptions").show(1000, function () {

// Perform some action necessary when the panel is displayed.

// The panel takes 1 second of animation to display.

...

});

Invoking show and hide methods without parameters is nearly equivalent to setting the display CSS attribute. The only difference is that the assigned value is cached for the purpose of toggling it through the toggle function:

$("#panelAdvancedOptions").toggle();

The preceding call toggles the visibility state of all elements in the wrapped set, making visible hidden elements and hiding visible elements.

In addition to plain show and hide methods, you also have methods to apply visibility changes through specific animations, such as sliding and fading. Methods are listed in Table 21-6.

Table 21-6. Visibility Effects

Function

Description

slideDown

Displays any matching elements by increasing their height progressively

slideUp

Hides any matching elements by decreasing their height progressively

slideToggle

Shows or hides all matching elements inverting the current sliding setting

fadeIn

Fades in any matching elements by reducing their opacity progressively

fadeOut

Fades out any matching elements by increasing their opacity progressively

fadeTo

Fades the opacity of all matching elements to a specified opacity

Styling

Applying CSS classes to selected elements is easy too. If you’re interested in tweaking just individual CSS properties, you can use the css function, as shown here:

$("form input").css(

{'color' : 'blue',

'background-color' : 'yellow',

'border-style' : 'dashed'}

);

To work with entire CSS classes, you have ad hoc functions such as those in Table 21-7.

Table 21-7. Working with CSS Classes

Function

Description

addClass

Adds the specified CSS class to any matching elements

removeClass

Removes the specified CSS class from any matching elements

toggleClass

Toggles the specified CSS class from any matching elements, meaning that the elements will be added to the class if they’re not already assigned and removed from the class if they are currently assigned

Binding and Unbinding Events

For years, it has been common to write HTML pages with client buttons explicitly attached to JavaScript event handlers. Here’s a typical example:

From a purely functional perspective, there’s nothing wrong with this code—it just works as expected and runs the fnClick JavaScript function whenever the user clicks the button. This approach, however, is largely acceptable when JavaScript is just used to spice up Web pages; it becomes unwieldy when the amount of JavaScript code represents a significant portion of the page.

The expression “unobtrusive JavaScript” is popular these days, and it just means that it would be desirable not to have explicit links between HTML elements and JavaScript code. In a way, unobtrusive JavaScript is the script counterpart of CSS classes. With CSS, you write plain HTML without inline style information and designer style elements using classes. Likewise, you avoid using event handler attributes (onclick, onchange, onblur, and the like) and use a single JavaScript function to attach handlers, upon page loading, wherever required.

The jQuery library provides a bunch of functions to bind and unbind handlers to events fired by DOM elements. The pair of bind and unbind functions are used to attach a callback function to the specified event:

// All elements that match the selector will be attached

// the same handler for the click event.

$(selector).bind("click", function() {

...

});

You use the unbind function to detach any currently defined handler for the specified event:

$(selector).unbind("click");

The unbind function doesn’t remove handlers that have been inserted directly in the markup through any of the onXXX attributes.

The jQuery library also defines a number of direct functions to bind specific events. Facilities exist