Introduction to jQuery slideDown()
Out of various Effect creating techniques that are available with jQuery in order to create animations, the sliding effect is one of such effective animation designing. slideDown() is a method to create the sliding effect by making the matched element visible through sliding motion.
Syntax:
$(selector).slideDown([Input parameter values])Parameters of jQuery slideDown()
slideDown() is included in jQuery since its version 1.0 and gradually evolved incorporating various features. The major changes to slideDown() and brief details about the functionalities in different versions of jQuery are described below:
| Parameter | Description | Default Value | Type | Version Added |
| Duration | To command how long the sliding effect to run. | 400 milliseconds | Number/String | 1.0 |
| Callback/Complete | To set the function to be executed after completion slideDown() method. | NA | Function() | 1.0 |
| Easing | Specifies the speed of the effect at different points of the time interval. | Swing | String | 1.0 |
| Queue | To decide whether to arrange the animation effects in queue or not. | True | Boolean/String | 1.0 |
| SpecialEasing | It contains multiple CSS properties and their corresponding Easing values. | NA | Object | 1.4 |
| Step | Used to modify the value of any property of the tween object before it is set. | NA | Function() | 1.0 |
| Progress | It can be set to call on completion of the sliding effect of each matched element. | NA | Function() | 1.8 |
| Start | This can set a function to execute before the sliding effect begins. | NA | Function() | 1.8 |
| Done | Sets the function to be called once the sliding animation is completed over an element and the promised object is resolved. | NA | Function() | 1.8 |
| Fail | Sets a function to execute on the failure of any animation. | NA | Function() | 1.8 |
| Always | Sets a function to execute either on completion(promised object is resolved) or on cancellation of sliding effect application(Promised object is rejected). | NA | Function() | 1.8 |
How to use jQuery slideDown() with Different Parameters?
Here we discuss the examples to use jQuery slideDown() with different parameter values.
1. Without Using any Parameter (With Default Values)
When the slideDown() method is used without any input value, it takes the default value for the occurrence of the sliding effect.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("p").slideDown();
});
});
</script>
</head>
<body style="background-color:blanchedalmond;">
<h3 style="font-family: Arial, Helvetica, sans-serif;">'slideDown()' method is used without paramter</h3>
<button class="btn">Slide down</button>
<p style="display: none;font-family: Arial, Helvetica, sans-serif;">This paragraph is displayed with sliding motion, after clicking
'Slide down' button.</p>
</body>
</html>Output:
Before slideDown() method is called:
After slideDown() method is called:
2. With the ‘Duration’ Parameter
The slideDown() method accepts the first input argument as duration parameter value i.e how long the effect would run. Any numeric number can be given as duration or just the keyword “slow” or “fast” also can be used which stands for 200 milliseconds and 600 milliseconds respectively.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("p").slideDown(5000);
});
});
</script>
</head>
<body style="background-color:blanchedalmond;">
<h3 style="font-family: Arial, Helvetica, sans-serif;">'slideDown()' method is used with 'duration' paramter</h3>
<button class="btn">Slide down</button>
<p style="display: none;font-family: Arial, Helvetica, sans-serif;">This paragraph is displayed with sliding motion in 5000 milliseconds, after clicking 'Slide down' button.</p>
</body>
</html>Output:
Before slideDown() method is called:
After slideDown() method is called:
3. slideDown() With ‘easing’ Parameter
The easing parameter lets the user decide the speed of the effect at different points of time. It has only two possible values:
- ‘Swing’: The speed of the sliding effect is slower at the beginning and at the end, faster in the middle.
- ‘Linear’: The speed of the sliding effect is constant throughout the execution of the function.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("p").slideDown(3000,"linear");
});
});
</script>
</head>
<body style="background-color:blanchedalmond;">
<h3 style="font-family: Arial, Helvetica, sans-serif;">'slideDown()' method is used with 'easing' paramter</h3>
<button class="btn">Slide down</button>
<p style="display: none;font-family: Arial, Helvetica, sans-serif;">This paragraph is displayed with sliding motion in a linear speed,
after clicking 'Slide down' button.</p>
</body>
</html>Output:
Before slideDown() method is called:
After slideDown() method is called:
4. slideDown() With ‘callback’ Parameter
The callback parameter sets the function name which gets fired once the sliding effect gets completed.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("p").slideDown(function(){
alert("slideDown() method is finished!");
});
});
</script>
</head>
<body style="background-color:blanchedalmond;">
<h3 style="font-family: Arial, Helvetica, sans-serif;">'slideDown()' method is used with 'callback' paramter</h3>
<button class="btn">Slide down</button>
<p style="display: none;font-family: Arial, Helvetica, sans-serif;">The Alert message appeared from callback function<br>
after the text message being visible.</p>
</body>
</html>Output:
Before slideDown() method is called:
After slideDown() method is called:
5. Applying slideDown() on Class Attribute
In HTML, the elements can be distinguishingly used by using class attributes or ID. Here we are going to apply the slideDown() method to one div session using class attributes.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
background-color:blanchedalmond;
border: solid 1px #c3c3c3;
width: 40%;
}
#panel {
padding: 5px;
display: none;
width: 40%;
height: 40px;
}
</style>
</head>
<body>
<div id="flip">Click here to execute slideDown() on panel div session</div>
<div id="panel">The div session with ID 'Panel' is appeared with sliding effect</div>
</body>
</html>Output:
Before slideDown() method is called:
After slideDown() method is called:
Thus slideDown() method supports various types of sliding effect creation. This is easy to use. It improves the effectiveness of any website in a significant manner by creating attractive animation effects. This technique supports various kinds of elements such as text, image, links, etc.
Conclusion
This method gets executed successfully on the elements either hidden by jquery methods or having the display property being set to ‘None’ in CSS. However, it does not work where the element is hidden by means of CSS property ‘visibility’, is set to ‘Hidden’.
If the slideDown() method is applied on <ul> tag element i.e an unordered list and its child elements(<li> ), the sliding animation may not work in some of IE versions, due to the ‘position property of <ul>. In order to overcome the issue, the property ‘position’ with value ‘relative’ and ‘zoom’ with value ‘1’ should be set in CSS.
Recommended Articles
This is a guide to jQuery slideDown(). Here we discuss the syntax, parameters and various examples to use slideDown() method. You may also look at the following articles to learn more –
