show() Effect in Jquery

Thiyagu

8 years ago

Description:

Jquery show() method used to display(make visible) matched element. The matched/selected elements will be show immediately, without any animation. If we apply duration, plain object or callback function then .show() becomes an animation method. It animates the height, width and opacity of the selected/matched elements simultaneously.

Syntax

.show(

[duration ] [easing ] [callback/complete ] )

Ex :

$("#div").show("slow", function() 
{ 
// Execute after Animation completed.
});

$("#div").show("slow", function()

{

// Execute after Animation completed.

});

Duration/speed	It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400). Duration are given in milliseconds and higher values indicate slower animations, not faster ones.
Easing	It specifies the easing function to be used for transition (default value: swing).
Callback	A function to call once the animation is complete.

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">

 $(document).ready(function () {
 $("#divflipBox").click(function () {
 $("#divpanelBox").show();
 });
 });

 </script>
 <style type="text/css">
 #divflipBox, #divpanelBox {
 background-color: #a0ce4e;
 border: solid 1px #c3c3c3;
 width: 25%;
 }

 #divpanelBox {
 padding: 30px;
 display:none;
 }
 </style>
</head>
<body>
 </br>
 <div id="divflipBox">
 Click to Show
 </div>
 <div id="divpanelBox">
 Hello Welcome to dotnet-helpers.com hide() example
 Learn MVC, ASP , JQuery with best examples. Thanks for visiting.
 </div>
</body>
</html>

<html>

<head>

$(document).ready(function () {

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

$("#divpanelBox").show();

});

</script>

#divflipBox, #divpanelBox {

background-color: #a0ce4e;

border: solid 1px #c3c3c3;

width: 25%;

}

#divpanelBox {

padding: 30px;

display:none;

}

</style>

</head>

<body>

</br>

Click to Show

</div>

Hello Welcome to dotnet-helpers.com hide() example

Learn MVC, ASP , JQuery with best examples. Thanks for visiting.

</div>

</body>

</html>

Output:

After clicking the “Click to Show” button, the “divpanelBox” will show immediately without any animation.

Description:

Syntax

Example:

Output:

Other Popular Articles