jQuery Slide Effect


The slide methods create sliding effects on elements by sliding them up and down.For sliding animation, jQuery has the following slide methods:

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() Method


This method is used to slide down an element.

Speed is an optional parameter that specifies the duration of the effect and can take the following parameters: "slow", "fast", or milliseconds.

Callback is also an optional parameter which is executed after the sliding completes.


Syntax:

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

For Example:


<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#display-div {
  text-align: center;
  background-color: #98babe;
  padding: 50px;
  display: none;
}
</style>
</head>
<body>

<button type="submit" id="flip-btn">Button</button>
<p>Click to slide down panel</p>
<div id="display-div">This is the slide element in action!</div>

<script>
$(document).ready(function(){
  $("#flip-btn").click(function(){
    $("#display-div").slideDown("slow");
  });
});
</script>
</body>
</html>
Live Demo!


JQuery slideUp() Method


This method is used to slide up an element.

The optional parameters speed and callback have the same fuctionality. Speed takes the values "slow", "fast", or milliseconds and callback is executed after sliding completes.


Syntax:

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

For Example:


<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#display-div {
  text-align: center;
  background-color: #98babe;
  padding: 50px;
  display: block;
}
</style>
</head>
<body>

<button type="submit" id="flip-btn">Button</button>
<p>Click to slide up panel</p>
<div id="display-div">This is the slide element in action!</div>

<script>
$(document).ready(function(){
  $("#flip-btn").click(function(){
    $("#display-div").slideUp("slow");
  });
});
</script>
</body>
</html>
Live Demo!


jQuery slideToggle() Method


This method toggles between the slideDown() and slideUp() methods. So if an element is already slide down, slideToggle() will slide it up and if an element has been slide up, slideToggle() will slide it down.


Syntax:

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

Speed is an optional parameter which takes the following values: "slow", "fast", milliseconds.

Callback is also an optional parameter and is executed after the sliding completes.


For Example:


<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#display-div {
  text-align: center;
  background-color: #98babe;
  padding: 50px;
  display: block;
}
</style>
</head>
<body>

<button type="submit" id="flip-btn">Button</button>
<p>Click to Toggle panel</p>
<div id="display-div">This is the slide element in action!</div>

<script>
$(document).ready(function(){
  $("#flip-btn").click(function(){
    $("#display-div").slideToggle("slow");
  });
});
</script>
</body>
</html>
Live Demo!