jquery hide show effects

jquery effects change the css properties on the fly.

jquery hide() method

using jquery hide() methods, you can hide the html elements.

Jquery hide method syntax :-

        $( selector ).hide( speed, callback );
  • speed - this is optional speed parameter repersent the speed of the hiding,can takes the values:'slow', 'fast', or millsecond.
  • callback - this is optional callback parameter is a function to be executed after the animation is complete.

jquery hide method example

<html>  
                   
      <head>
                   
<title>to look the hide and show effect on the box,click on the hide/show button.

</title>
                  
    <style type="text/css">
 
 #box{background-color:gold;width:490px;height:210px;}
                   
    </style>
       
         <script
                   
 src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >
                   
         </script>
                   
         <script>
                   
               $(document).ready(function(){
                   
               $(".hide").click(function(){
                   
               $("div#box").hide(); });
                   
               $(".show").click(function(){
                   
               $("div#box").show();
                   
                    }); });                  
                   
         </script>
         
    </head>
                   
        <body>
                   
     <div  id="box">
                   
            <img src="./images/images.jpg" width= "150px" height="200px;"/>
                   
            <img src="./images/web.jpg"   width= "150px" height="200px;"/>
                   
            <img src="./images/rrir.jpg"  width= "150px" height="200px;"/>
                   
     </div>
                   
                      <button class="hide"> hide <button>
                      
                      <button class="show"> show <button>
                      
        </body>
  
  </html>

jquery show() method

using jquery show() methods, you can show the html elements.

jquery show method syntax :-

              $( selector ).show( speed, callback );
  • speed - this is optional speed parameter repersent the speed of the hiding,can takes the values:'slow', 'fast', or millsecond.
  • callback - this is optional callback parameter is a function to be executed after the animation is complete.

jquery show method example :-

            
             <script>
                   
               $(document).ready(function(){
                   
               $(".hide").click(function(){
                   
               $("div#box").hide()
                   
               $(".show").click(function(){
                   
               $("div#box").show()
                   
                    }); });                  
                   
         </script>

jquery hide and show method with callback parameter example

 <script>
    
                    $(document).ready(function(){
                   
                    $(".hide").click(function(){
                    
                    $("div#box").hide(2000, 
                    
            function(){alert("the hide() method execution  completed.");});
                    
                       });
                    
                    $(".show").click(function(){
                    
                    $("div#box").show(4000,                    
                    
           function(){alert("the show() method execution  completed.");});
                     
                     });});                  
                    
                      </script>

jquery hide and show methods with the duration (time) argument example


jquery toggle() method

using jquery provides methods to toggle the display state of elements between revealed or

hidden if the element is initially displayed, it will be hidden:if hidden, it will be shown.

jquery show method the syntax :-

    $( selector ).toggle( speed, callback );
  • speed - this is optional speed parameter can take the following values:'slow', 'fast', or millsecond.
  • callback - this is optional callback parameter is a function to be executed after toggle() complete.

jquery toggle method example

            <script>
  
                   $(document).ready(function(){
                   
                   $(".toggle").click(function(){
                   
                   $("div#box").toggle(1500,                   
                   
       function(){alert("the toggle() method execution is finish.");}
       
                   }); });
                        
    </script>