jQuery show()

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

jQuery show()

The jQuery show() method is used to show the selected elements.

Syntax:

  1. $(selector).show();  
  2. $(selector).show(speed, callback);  
  3. $(selector).show(speed, easing, callback);  

speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after completion of show() effect.

Let's take an example to see the jQuery show effect.

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  5. <script>  
  6. $(document).ready(function(){  
  7.         $("#hide").click(function(){  
  8.         $("p").hide();  
  9.     });  
  10.     $("#show").click(function(){  
  11.         $("p").show();  
  12.     });  
  13. });  
  14. </script>  
  15. </head>  
  16. <body>  
  17. <p>  
  18. <b>This is a little poem: </b><br/>  
  19. Twinkle, twinkle, little star<br/>  
  20. How I wonder what you are<br/>  
  21. Up above the world so high<br/>  
  22. Like a diamond in the sky<br/>  
  23. Twinkle, twinkle little star<br/>  
  24. How I wonder what you are  
  25. </p>  
  26. <button id="hide">Hide</button>  
  27. <button id="show">Show</button>  
  28. </body>  
  29. </html>  

Test it Now

Output:

This is a little poem: 
Twinkle, twinkle, little star
How I wonder what you are
Up above the world so high
Like a diamond in the sky
Twinkle, twinkle little star
How I wonder what you are

Hide Show

jQuery show() effect with speed parameter

Let's see the example of jQuery show effect with 1500 milliseconds speed.

  1. $(document).ready(function(){  
  2.         $("#hide").click(function(){  
  3.         $("p").hide(1000);  
  4.     });  
  5.     $("#show").click(function(){  
  6.         $("p").show(1500);  
  7.     });  
  8. });  

Test it Now