[jQuery] Effect show() Method

jquery show effects demo

.show() is a jQuery method that displays hidden elements on your page.

Set up the HTML and CSS

In this example, we will use the method .show() to make a hidden element appear when clicking a button.

HTML and CSS for the element that is not displayed:

<style type="text/css">
#hidden-element{ display:none; }
</style>

<div id="hidden-element">Hello world</div>

HTML of the button that will make the div "#hidden-element" appear:

<input type="button" id="button-show" value="Click me" />

Set up the jQuery code

<script>
$(function(){
 $('#button-show').click(function(){
  $('#hidden-element').show();
 });
});
</script>

When the element with the id 'button-show' is clicked, the element with the id 'hidden-element' is displayed.

show() parameters and options

Duration

You can specify a duration in the show() to change the speed of the animation when the element appears on the page.

The duration can take the following values:

• slow (200 milliseconds)
• fast (600 milliseconds)
• any duration in milliseconds

<style type="text/css">
#hidden-element{ display:none; }
</style>

<input type="button" id="button-show" value="Click me" />

<div id="hidden-element">Hello world</div>

<script>
$(function(){
 $('#button-show').click(function(){
  $('#hidden-element').show('slow');
 });
});
</script>

Callback

A callback is a function that is called when the animation is complete. When using show(), the callback function will be called when the element is entirely displayed on the page.

Example:

When the button below is clicked, the animation begins and then a javascript 'alert' dialog box opens when the animation is over.

<style type="text/css">
#hidden-element{ display:none; }
</style>

<input type="button" id="button-show" value="Click me" />

<div id="hidden-element">Hello world</div>

<script>
$(function(){
    $('#button-show').click(function(){
        $('#hidden-element').show( function(){alert('Animation is complete!')} );
    });
});
</script>