Updated March 17, 2023
Introduction to Slide in jQuery
The slide function in jQuery is used for creating an illusion of an animated feature for boggling, showing, and hiding an element in the web page designed/ implemented using the javascript jQuery function. There are three types of methods generally used for the slide feature in jQuery, and they are slideUp(), slideDown() and slideToggle(). All these 3 methods can function with the help of a few parameters like the duration, the easing, and the function, which can have dynamic or static values similar to any other scripting/ programming language.
Methods of Slide in jQuery
The 3 methods in the Jquery are slideUp(), SlideDown() and slideToggle():
1. slideUp()
SlideUp() method will hide an element that is selected using an animation. It doesn’t return anything but simply hides the element. We can animate the images also as it changes the height of the image or the element.
Syntax:
$(selector) .slideUp( [duration][,easing] [,function()])Parameters:
- Duration: The duration can be a string or a number. It can be either a time in milliseconds or it can be preset. The default value of the duration is 400 milliseconds. It can take slow, fast or normal as a string parameter. This helps us to control the slide animation based on our requirements.
- Easing: The easing should be of string type. It is used for transition. The default value is swing.
- Function: An optional callback function will be executed when the animation is completed.
Examples #1
This is an example of the slideUp() method. In this, we have passed the parameters empty i.e., normal (first) for the paragraph so it takes the default value of 400 milliseconds. Next, we have passed the string “fast” and “slow”.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Slide-Up </title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
p{
padding: 30px;
background: Red;
}
</style>
<script>
$(document).ready(function(){
$(".up-btn").click(function(){
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
});
});
</script>
</head>
<body>
<button type="button" class="up-btn">Slide Up Paragraphs</button>
<p class="normal">This paragraph is an example for the slide up paragraphs with default speed.</p>
<p class="fast">This paragraph is an example for the slide up paragraphs with fast speed.</p>
<p class="slow">This paragraph is an example for the slide up paragraphs with slow speed.</p>
</body>
</html>Output:
The output, it displays the paragraphs.
On clicking on the slide-up paragraphs button the three paragraphs will be hidden.
Examples #2
In this example, we have passed the “seconds” for the duration parameter.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Slide-Up </title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
p{
padding: 30px;
background: Red;
}
</style>
<script>
$(document).ready(function(){
$(".up-btn").click(function(){
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(20000);
});
});
</script>
</head>
<body>
<button type="button" class="up-btn">Slide Up Paragraphs</button>
<p class="very-fast">This paragraph is an example for the slide up paragraphs with very fast speed.</p>
<p class="very-slow">This paragraph is an example for the slide up paragraphs with very slow speed.</p>
</body>
</html>Output:
In the output, we can observe that it displays the two paragraphs.
On clicking on the slide up paragraphs button we can observe that the first paragraph was hidden immediately as it has taken the time 50 milliseconds.
While the second paragraph is slowly getting hidden as it has taken the time as 20000 milliseconds. We can see that the size is getting reduced slowly and getting hidden.
2. slideDown()
SlideDown () method will show an element that is selected using an animation.
Syntax:
$(selector) .slideDown( [duration][,easing] [,function()])Parameters:
- Duration: The duration can be a string or a number. It can be either a time in milliseconds or it can be preset. The default value of the duration is 400 milliseconds. It can also be slow, fast or normal. This helps us to control the slide animation.
- Easing: The easing should be of string type. It is used for transition. The default value is swing.
- Function: An optional callback function will be executed when the animation is completed.
Example
This is an example of the slideDown() method.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Slide-Up and Slide-Down Effects</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
p{
padding: 30px;
background: Red;
}
</style>
<script>
$(document).ready(function(){
$(".up-btn").click(function(){
$("p.normal").slideUp();
});
$(".down-btn").click(function(){
$("p.normal").slideDown();
});
});
</script>
</head>
<body>
<button type="button" class="up-btn">Slide Up Paragraph</button>
<button type="button" class="down-btn">Slide Down Paragraph</button>
<p class="normal">This paragraph will fade with default speed.</p>
</body>
</html>Output:
After executing the program.
On clicking on the slide up paragraph the paragraph is hidden.
On clicking on the slide down paragraph the paragraph is shown. We can see in the below image.
3. slideToggle()
SlideToggle () method creates a toggle effect. Toggles between the display and hidden. Whenever it is clicked it toggles the sliding animation for the selected element.
Syntax:
$(selector) .slideToggle( [duration][,easing] [,function()])Parameters:
-
- Duration: The duration can be a string or a number. It can be either a time in milliseconds or it can be preset. The default value of the duration is 400 milliseconds. It can also be slow, fast or normal. This helps us to control the slide animation based on our requirements.
- Easing: The easing should be of string type. It is used for transition. The default value is swing.
- Function: An optional callback function will be executed when the animation is completed.
Example
This is an example for slideToggle() method.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Toggle Effect</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
p{
padding: 30px;
background: Red;
}
</style>
<script>
$(document).ready(function(){
$(".toggle-btn").click(function(){
$("p.normal").slideToggle();
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">Slide toggle Paragraph</button>
<p class="normal">This paragraph will fade with default speed and toggle on clicking on the button.</p>
</body>
</html>Output:
Executing the program.
On clicking on the button (Slide toggle paragraph) is hidden.
On clicking on the same button (Slide toggle paragraph) it is shown.
So these are methods of Slide in jQuery.
Recommended Articles
This is a guide to Slide in jQuery. Here we discuss 3 methods in the Jquery are slideUp(), SlideDown() and slideToggle() in detail with proper codes and outputs. You can also go through our other related articles to learn more –
