jQuery show() Effect

The jQuery show effect is used to show each of the selected elements which is disabled. This is similar to 'display:block' css style.

Syntax of show() Effect

$(selector).show(speed, callback) 

The selector is the element which to be shown. Both speed and callback parameters are optional. The speed parameter specifies either in milliseconds or a few predefined strings, slow and fast. The callback function is called after the element is completely displayed.


<style>.cls { display: none;}
<p id="demo" class="cls"> Hello World!</p>
<button id="btn">Show</button>

$("#btn").click(function() {

Output of the above code

Hello World!

In the above example, when the user click on the 'Show Text' button, the paragraph of 'demo' id get displayed.

Example - show() with time and callback function

.demobox { 
width: 200px; 
height: 150px; 
background-color: pink;
border: 4px solid black;
display: none;
padding: 22px;

<div id="demo" class="demobox"> Demo Box</div>
<button id="btn">Show Box</button>

(function( $ ) { 
$("button#btn").click(function() {
$("div#demo").show("slow", function() {
alert( "Animation complete!" );

Output of the above code

Demo Box

In the above example, when the user click on the 'Show Box' button, the div box of 'demo' id get displayed.

Read more articles

General Knowledge

Learn Popular Language