jQuery Slide Effect

In this article, we will discuss how jQuery achieves sliding effect of elements and examples of the slide methods in jQuery.

Sliding in jQuery is achieved through modifying the CSS height property.

We can acheive the following effects with this :

– SlideUp : Decrease the height of the component so that it is completely hidden

– SlideDown : Increase the height of the element so that it is completely visible

jQuery Slide methods

jQuery has following slide methods :

– slideUp()
– slideDown()
– slideToggle()

jQuery slideUp() Method

The jQuery slideUp() method is used to slide up an element.

Syntax:


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

Example :

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
      #block1 {
          width: 100px;
          height: 100px;
          background: red;
        }
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").click(function(){
        $("#block1").slideUp();
    });
});
</script>
</head>
<body>
<div id="block1">This block would slide up on click</div>
</body>
</html>

The optional speed parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds.
For example,


$("#block1").slideUp("slow");
$("#block1").slideUp("fast");

SlideUp with callback:

The optional callback parameter is a function to be executed after the sliding completes.


        $(element).slideUp(function(){
        // do something
        });

Example :

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
      #block1 {
          width: 100px;
          height: 100px;
          background: red;
        }
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").click(function(){
        $("#block1").slideUp("slow",function(){
        $(msg).text("Slide Up completed");
        });
    });
});
</script>
</head>
<body>
<div id="block1">This block would slide up on click</div>
<div id="msg"></div>
</body>
</html>

jQuery slideDown() Method

The jQuery slideDown() method is used to slide down an element.

Syntax:
The syntax is similar to slideUp().


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

Example :

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
      #block1 {
          width: 100px;
          height: 100px;
          display:none;
          background: red;
        }
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#block1").slideDown();
    });
});

</script>
</head>
<body>
<button>
Click me to slide down a div
</button>
<br/><br/>
<div id="block1"></div>
</body>
</html>

The optional speed parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds.

The optional callback parameter is a function to be executed after the sliding completes.

jQuery slideToggle() Method

The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.

If the elements have been slid down, slideToggle() will slide them up.

If the elements have been slid up, slideToggle() will slide them down.


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

Example :

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
      #block1 {
          width: 100px;
          height: 100px;
          display:none;
          background: red;
        }
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#block1").slideToggle();
    });
});

</script>
</head>
<body>
<button>
Click me to Toggle between Slide Up/Down
</button>
<br/><br/>
<div id="block1"></div>
</body>
</html>

The optional speed parameter can take the following values: “slow”, “fast”, milliseconds.

The optional callback parameter is a function to be executed after the sliding completes.

jQuery Slide Effect