Sliding in jQuery Effects


Sliding methods are used to hide and display the with sliding effect.There are three methods in jQuery Sliding Effects.

  • slideDown() -method used to display the elements with sliding effect.
  • slideUp() - method used to hide the elements with sliding effect.
  • slideToggle() - method used to display or hide the elements with sliding effect.

slideDown() Method

The following example shows, how to display the elements with slideDown() method.

Example 
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
  </head>
  <body>
    <input type='button' value='SlideDown' id='btn'> <br><br>
    <div style='width:80px; height:80px; background:green; display:none;' id='box'></div>

  <script>
    $(document).ready(function(){
      $("#btn").click(function(){
        $("#box").slideDown();
      });
    });
  </script>
  </body>
</html>
Try it Yourself

Demo

slideUp() Method

The following example shows, how to hide the elements with slideUp() method.

Example 
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
  </head>
  <body>
    <input type='button' value='SlideUp' id='btn'> <br><br>
    <div style='width:80px; height:80px; background:green; ' id='box'></div>

  <script>
    $(document).ready(function(){
      $("#btn").click(function(){
        $("#box").slideUp();
      });
    });
  </script>
  </body>
</html>
Try it Yourself

Demo

slideToggle() Method

The following example shows, how to hide and display the elements with slideToggle() method.

Example 
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
  </head>
  <body>
    <input type='button' value='slideToggle' id='btn'> <br><br>
    <div style='width:80px; height:80px; background:green; ' id='box'></div>

  <script>
    $(document).ready(function(){
      $("#btn").click(function(){
        $("#box").slideToggle();
      });
    });
  </script>
  </body>
</html>
Try it Yourself

Demo