Programming

jQuery Show: A Complete Introduction About It

April 1, 2021

Introduction to jQuery show( )

The jQuery show( ) method simply used to show the html elements which are hidden. The show method can be used in two ways.

1. One way is without any parameters as:

show( );

The above method does not take any parameters and shows the selected html elements.

2. Second way is with the parameters which control the speed of the animation as:

show( speed, easing, callback );

The above method as accept the three parameters in three ways:

  • show( speed ); – The speed parameter specify the duration of this effect.
  • show( speed, callback ); – The speed parameter specifies the duration of this effect like “slow”, “fast” and the numeric value in milliseconds. The callback parameter specifies what to perform once the called the show( ) method.
  • show( speed, easing, callback ); – The speed and callback parameters are the same as above, the easing is a string value like linear and swings two values which are used to specify easing function to be run during showing the selected html element.

Examples of jQuery show( )

Following are the examples of jQuery show() explained in more detail.

Example #1 – For show( ) method

Below is an example for the show( ) method to understand the usage of this method which is not passing any parameters.

Syntax:

selector.show( );

Code:

<!DOCTYPE html>
<html>
<head>
<title>  The jQuery example for show() Method </title>
<style>
#bdr {
border: 2px solid black;
padding-top: 30px;
height: 140px;
background: red;
display: none;
}
</style>
<script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” >
</script>
</head>
<body style = “text-align:center;”>
<div id= “bdr”>
<h1 style = “color:white;” >
show() Method Example
</h1>
</div><br>
<button id = “bttn”>
Show( ) mthod
</button>
<!– Script to show display:none content –>
<script>
$(document).ready(function() {
$(“#bttn”).click(function() {
$(“#bdr”).show();
});
</script>
</body>
</html>

Example #2 – For show( speed ) method

Below is an example for the show( speed ) method to understand the usage of this method which is passing speed parameters as 2000 milliseconds that is 2 seconds.

Syntax:

selector.show( speed, [easing], [callback] );

Code:

<!DOCTYPE html>
<html>
<head>
<title>  The jQuery example for show() Method </title>
<style>
#bdr {
border: 2px solid black;
padding-top: 30px;
height: 140px;
background: red;
display: none;
}
</style>
<script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” >
</script>
</head>
<body style = “text-align:center;”>
<div id= “bdr”>
<h1 style = “color:white;” >
show( speed ) Method Example
</h1>
</div><br>
<button id = “bttn”>
Show( ) mthod
</button>
<script>
$(document).ready(function() {
$(“#bttn”).click(function() {
$(“#bdr”).show(2000);
</script>
</body>
</html>

After the button press the red box with message “show( speed ) method example” show with the time duration 2 seconds, as just showing the output after the box displayed:

Example #3 – For show( speed ) method

Below is an example for the show( speed ) method to understand the usage of this method which is passing speed parameters as “slow” and can try with speed=”fast” also:

Code:

<!DOCTYPE html>
<html>
<head>
<title>  The jQuery example for show() Method </title>
<style>
#bdr {
border: 2px solid black;
padding-top: 30px;
height: 140px;
background: red;
display: none;
}
</style>
<script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” >
</script>
</head>
<body style = “text-align:center;”>
<div id= “bdr”>
<h1 style = “color:white;” >
show(speed=”slow” ) Method Example
</h1>
</div><br>
<button id = “bttn”>
Show( ) mthod
</button>
<script>
$(document).ready(function() {
$(“#bttn”).click(function() {
$(“#bdr”).show(“slow”);
</script>
</body>
</html>

After the button press the red box with message “show( speed=”slow” ) method example” show slowly, as just showing the output after the box displayed:

Example #4 – For show( easing ) method

Below is an example for the show( speed ) method to understand the usage of this method which is passing speed parameters as “slow” and easing as “swing”:

Code:

<!DOCTYPE html>
<html>
<head>
<title>  The jQuery example for show( easing ) Method </title>
<style>
#bdr {
border: 2px solid black;
padding-top: 30px;
height: 140px;
background: red;
display: none;
}
</style>
<script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” >
</script>
</head>
<body style = “text-align:center;”>
<div id= “bdr”>
<h1 style = “color:white;” >
show( easing=”swing” ) Method Example
</h1>
</div><br>
<button id = “bttn”>
Show( ) mthod
</button>
<script>
$(document).ready(function() {
$(“#bttn”).click(function() {
$(“#bdr”).show(“slow”,”swing”); <!– or just show(“swing”) –>
</script>
</body>
</html>

After the button press the red box with message “show( speed=”slow” ) method example” show slowly, as just showing the output after the box displayed:

Example #5 – For show( callback ) method

Below is an example for the show( callback ) method to understand the usage of this method which is passing speed parameters as “slow” and callback:

Code:

<!DOCTYPE html>
<html>
<head>
<title>  The jQuery example for show( callback ) Method </title>
<style>
#bdr {
border: 2px solid black;
padding-top: 30px;
height: 140px;
background: red;
display: none;
}
</style>
<script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” >
</script>
</head>
<body style = “text-align:center;”>
<div id= “bdr”>
<h1 style = “color:white;” >
show( callback ) Method Example
</h1>
</div><br>
<button id = “bttn”>
Show( ) mthod
</button>
<script>
$(document).ready(function() {
$(“#bttn”).click(function() {
$(“#bdr”).show(“slow”,”swing”, function(){
alert(” show( callback ) method is finished “);
</script>
</body>
</html>

After the button press the red box with message “show( callback ) method example” show slowly and alert message, as below showing the output after the box displayed:

Conclusion

The jQuery show( )method simply used to show the html elements which are hidden. The show method can be used in two ways.

  • One way is without any parameters as the show( ) this method does not take any parameters and shows the selected html elements.
  • Second way is to show( speed, easing, callback ) with the parameters which control the speed of the animation.

The speed parameter specifies the duration of this effect like “slow”, “fast” and the numeric value in milliseconds. The callback parameter specifies what to perform once the called the show( ) method. The easing is a string value like linear and swings two values which are used to specify easing function to be run during the showing the selected html element.


  • Recent Posts



shares
Loading...