jQuery Sliding

The jQuery sliding is used to slide the element up and down.

jQuery slideUp() method is used to hide the element i.e. gradually decreasing the height of the element.

jQuery slideDown() method is used to show the element i.e. gradually increasing the height of the element.

jQuery Slide method

followings are the slide methods:

slideDown()
slideUp()
slideToggle()

       
 $(selector).slideDown(speed);  
 $(selector).slideDown(speed, callback);   
 $(selector).slideDown(speed, easing, callback);

speed: It indicates the slide duration that has the following values: "slow", "fast" and milliseconds.

easing: It denoted the easing function that is used for transition.

callback: It is an optional parameter. This function will be called after the completion of the slide effect.

jQuery slideDown() Method

jQuery slideDown() method is used to slide down an element. Basically, it is a process of gradually increasing the height of the element which is why this element displays us.

General Syntax

      $(selector).slideDown(speed,callback);

Try it now

Source Code

          
            $(document).ready(function () {
  // Slide down hidden paragraphs
  $(".btn-slidedown").click(function () {
    $("p").slideDown();
    $("p.slow").slideDown("slow");
    $("p.fast").slideDown("fast");
    $("p.very-slow").slideDown(5000);
  });
});

Try it now

Please keep in mind that speed and callback function both are optional parameters.

The speed parameter is used to show the duration of the slide. It has following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function that will be executed after the completion of the slide effect.

jQuery slideToggle() Method

Jquery slideToggle() method is used to toggle between the slideUp() and slideDown() method.

If the element is shown then slideToggle() method is hidden the element gradually, decreasing their height i.e slideUp() effect.

If the element is hidden then the slideToggle() method is used to show the element by gradually increasing the height i.e slideUp() effect.

Source Code

          
            $(selector).slideToggle(speed);  
$(selector).slideToggle(speed, callback);   
$(selector).slideToggle(speed, easing, callback);

Try it now

jQuery Sliding

jQuery Slide method

jQuery slideDown() Method

jQuery slideToggle() Method

Web Tutorials