JQUERY BASIC
JQUERY EFFECTS
JQUERY MANIPULATION
JQUERY ADVANCED
JQUERY EXAMPLES
JQUERY REFERENCE

jQuery Sliding Effects

In this tutorial you will learn how to create slide motion effect using jQuery.

jQuery slideUp() and slideDown() Methods

The jQuery slideUp() and slideDown() methods is used to hide or show the HTML elements by gradually decreasing or increasing their height (i.e. by sliding them up or down).

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Slide up displayed paragraphs
  •     $(".up-btn").click(function(){
  •         $("p").slideUp();
  •     });
  •     
  •     // Slide down hidden paragraphs
  •     $(".down-btn").click(function(){
  •         $("p").slideDown();
  •     });
  • });
  • </script>

Like other jQuery effects methods, you can optionally specify the duration or speed parameter for the slideUp() and slideDown() methods to control how long the slide animation will run. Durations can be specified either using one of the predefined string 'slow' or 'fast', or in a number of milliseconds; higher values indicate slower animations.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Sliding up displayed paragraphs with different speeds
  •     $(".up-btn").click(function(){
  •         $("p.normal").slideUp();
  •         $("p.fast").slideUp("fast");
  •         $("p.slow").slideUp("slow");
  •         $("p.very-fast").slideUp(50);
  •         $("p.very-slow").slideUp(2000);
  •     });
  •     
  •     // Sliding down hidden paragraphs with different speeds
  •     $(".down-btn").click(function(){
  •         $("p.normal").slideDown();
  •         $("p.fast").slideDown("fast");
  •         $("p.slow").slideDown("slow");
  •         $("p.very-fast").slideDown(50);
  •         $("p.very-slow").slideDown(2000);
  •     });
  • });
  • </script>

You can also specify a callback function to be executed after the slideUp() or slideDown() method completes. We'll learn more about the callback function in upcoming chapters.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Display alert message after sliding up paragraphs
  •     $(".up-btn").click(function(){
  •         $("p").slideUp("slow", function(){
  •             // Code to be executed
  •             alert("The slide-up effect is completed.");
  •         });
  •     });
  •     
  •     // Display alert message after sliding down paragraphs
  •     $(".down-btn").click(function(){
  •         $("p").slideDown("slow", function(){
  •             // Code to be executed
  •             alert("The slide-down effect is completed.");
  •         });
  •     });
  • });
  • </script>

jQuery slideToggle() Method

The jQuery slideToggle() method show or hide the selected elements by animating their height in such a way that if the element is initially displayed, it will be slide up; if hidden, it will be slide down i.e. toggles between the slideUp() and slideDown() methods.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Toggles paragraphs display with sliding
  •     $(".toggle-btn").click(function(){
  •         $("p").slideToggle();
  •     });
  • });
  • </script>

Similarly, you can specify the duration parameter for the slideToggle() method like slideUp() and slideDown() methods to control the speed of the slide toggle animation.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Slide Toggles paragraphs with different speeds
  •     $(".toggle-btn").click(function(){
  •         $("p.normal").slideToggle();
  •         $("p.fast").slideToggle("fast");
  •         $("p.slow").slideToggle("slow");
  •         $("p.very-fast").slideToggle(50);
  •         $("p.very-slow").slideToggle(2000);
  •     });
  • });
  • </script>

Similarly, you can also specify a callback function for the slideToggle() method.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Display alert message after slide toggling paragraphs
  •     $(".toggle-btn").click(function(){
  •         $("p").slideToggle(1000, function(){
  •             // Code to be executed
  •             alert("The slide-toggle effect is completed.");
  •         });
  •     });
  • });
  • </script>

Your Feedback:

We would love to hear from you, please drop us a line.