jQuery Tutorial


jQuery Example


jQuery References


jQuery Hide Show Effect




jQuery use to simple interface for various kind of Effects like Hide, Show, Slide, Fade, Animate and Toggle Effects.

juery Hide Show Effect

show() to show the elements and hide() to hide them.

Syntax

$(selector).show( speed, [callback] );
$(selector).hide( speed, [callback] );
  • speed: Elements is a represent by three predefined String speed ("slow", "normal", "fast"). otherwise number represent by milliseconds (Ex. 3000).
  • callback: Callback is optional parameter. It is use to represents a function to be executed whenever effect is completed.

Example:

<html>
<head>
   <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head>

<body>

<button id="btn1">Click To Hide Paragraph</button>
<button id="btn2">Click To Show Paragraph</button>

  <p style="background-color:#99FFFF;font-size:16px;
  font-family:Verdana;">This Paragraph Will Be Hide After Click...</p> 
  
<script type="text/javascript"> 
    $("#btn1").hide();
      $("p").hide();	
    $("#btn2").click(function () {
      $("p").show("slow");
	  $("#btn2").hide();
	  $("#btn1").show();
    }); 
    $("#btn1").click(function () {
      $("p").hide("slow");
    });
</script>

</body>
</html>
Online Try This Code Your Self....   »

Full Reference of jQuery Effects References Learn all jQuery Effects References.