Delphinidin

Showing and hiding elements using jQuery is a basic effect. I showed examples of this effect being used in previous chapters, but usually these effects can be seen used in conjunction with the click event. It is commonly used across the Internet. Google Gmail uses the show/hide effect to show the new Call Phone feature overlay.

The show or hide effect is attached to a selector and two optional parameters can be passed into it. The duration parameter determines how long the animation runs and can be set using the keywords fast or slow, as well as milliseconds (600, 200, 700, and so on). The callback parameter allows you to link up a function, which executes when the show effect is complete.

$(selector).show(duration, callback)

The following example shows a link with a click event attached. When the link is clicked, an element with the class recipe is shown. This is the show effect in its most basic form.

<style>
.recipe {display:none;}
</style>
$('.recipe-name').bind('click', function() {
$('.recipe').show();
});
<a href="#" class="recipe-name">Key Lime Pie</a>
<div class="recipe">Key lime pie is an American dessert made of key lime juice, egg
yolks, and sweetened condensed milk in a pie crust.</div>

jQuery enables the div to be shown by adding a display:block inline style to the selected element. The hide event works exactly like the show event, except that it hides the selected element. The inline style is changed to display:none.

$('.recipe-name').bind('click', function() {
$('.recipe').hide();
});
<a href="#" class="recipe-name">Key Lime Pie</a>
<div class="recipe">Key lime pie is an American dessert made of key lime juice, egg
yolks, and sweetened condensed milk in a pie crust.</div>

If you would like more control over the speed of the show effect, just pass either the specific keyword (fast/slow) or number of milliseconds to the show method.

$('.recipe').show('slow');

You can also pass a callback function to the show method, which fires aft er the effect has finished rendering.