jQuery Slide


There are three types of slider effect methods in jQuery and typically these methods are used to hide and show an HTML element with slider effect.

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

jQuery slideDown() Method

This method is used to hide the HTML element to generate a slide down effect.

Syntax

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

Parameters

The two parameters speed and callback are optional.

speed - This parameter is used to set the speed of hiding or showing. Its value can be "slow", "fast" or milliseconds.

callback - Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideDown("slow");
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

 

jQuery slideUp() Method

This method is used to show the HTML element to generate a slide up effect.

Syntax

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

Parameters

The two parameters speed and callback are optional.

speed - This parameter is used to set the speed of hiding or showing. Its value can be "slow", "fast" or milliseconds.

callback - Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideUp("slow");
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

jQuery slideToggle() Method

This method is used to toggles between the slideDown() and slideUp() methods. if an element is hidden then it will show the element(slideDown) and if an element is visible then it will hide the element(slideUp).

Syntax

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

Parameters

The two parameters speed and callback are optional.

speed - This parameter is used to set the speed of hiding or showing. Its value can be "slow", "fast" or milliseconds.

callback - Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle("slow");
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>