jQuery slide

What are jQuery Sliding Methods ?

JQuery can help in creating the sliding effects on the elements.

jQuery has several slide methods and they are provided below:

  1. slideDown()
  2. slideUp()
  3. slideToggle()  

jQuery slideDown() Method

The jQuery slideDown() method is used for the purpose of sliding down an element.

Syntax:

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

The duration of the effect is specified by the optional speed parameter. The values: “slow”, “fast” or milliseconds can be taken. 

The optional callback parameter can be defined as a function which is to be executed after the process of sliding completes. 

jQuery slideUp() Method

The jQuery slideUp() method is used for the purpose of sliding up an element.

Syntax:

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

The duration of the effect is specified by the optional speed parameter. The values: “slow”, “fast” or milliseconds can be taken. 

The optional callback parameter can be defined as a function which is to be executed after the process of sliding completes. 

jQuery slideToggle() Method

The jQuery slideToggle() method is responsible for toggling between the slideDown() and the slideUp() methods.

If in case the elements have been slid down then slideToggle() will slide them all up.

If in case the elements have been slid up then slideToggle() will slide them all down.

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

The duration of the effect is specified by the optional speed parameter. The values: “slow”, “fast” or milliseconds can be taken. 

The optional callback parameter can be defined as a function which is to be executed after the process of sliding completes. 

Examples:
HTML Document (slide.html)
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>CP Tutorials</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#slide-up").click(function () {
                $(".slide").slideUp();
            });
            $("#slide-down").click(function () {
                $(".slide").slideDown();
            });
            $("#slide-toggle").click(function () {
                $(".slide").slideToggle();
            });
        });
    </script>
</head>
<body>
<div style="background-color: #92e58e;padding: 8px;border: 4px solid #517f4f;width: 200px">
    <h4>Courses</h4>

    <div class="slide">
        <p>HTML</p>

        <p>CSS</p>

        <p>JavaScript</p>

        <p>PHP</p>

        <p>Jquery</p>
    </div>
</div>
<button type="button" id="slide-up">Slide Up</button>
<button type="button" id="slide-down">Slide Down</button>
<button type="button" id="slide-toggle">Slide Toggle</button>
</body>
</html>