jQuery slideDown() Effect
The jQuery slideDown() method is used to slide down the selected element.
Syntax of slideDown() Effect
$(selector).slideDown(speed, easing, callback) The selector is the element on which slideDown effect occurs. The optional speed parameter specifies either in milliseconds or a few predefined strings, slow and fast. The by default speed is 400 milliseconds. The easing parameter specifies the speed that the sliding should run at different points while sliding. jQuery supports two easing methods: linear and swing. The callback function is called after the sliding completion.
Example - slideDown with slow speed
<style>
.demobox {
width: 200px;
height: 150px;
background-color: #FFCCFF;
border: 3px solid black;
display: none;
padding: 10px;
}
</style>
<div id="demo" class="demobox"> Hello World!</div>
<button id="btn">Start Sliding</button>
<script>
$(document).ready(function(){
$("button#btn").click(function() {
$("div#demo").slideDown('slow');
});
});
</script>Output of the above code
In the above example, when the user click on the 'Start Sliding' button, the div box of 'demo' id gets slide down.
Example - slideDown with time and linear easing
<style>
.demobox {
width: 200px;
height: 150px;
background-color: #99FF99;
border: 3px solid black;
display: none;
padding: 10px;
}
</style>
<div id="demo1" class="demobox"> Hello World!</div>
<button id="btn1">Start Sliding</button>
<script>
$(document).ready(function(){
$("button#btn1").click(function() {
$("div#demo1").slideDown(800, "linear");
});
});
</script>Output of the above code
In the above example, when the user click on the 'Start Sliding' button, the div box of 'demo1' id gets slide down according to the given sliding speed and linear easing.
Example - slideDown with time, swing easing and callback function
<style>
.demobox {
width: 200px;
height: 150px;
background-color: #E5CCFF;
border: 3px solid black;
display: none;
padding: 10px;
}
</style>
<div id="demo2" class="demobox"> Hello World!</div>
<button id="btn2">Start Sliding</button>
<script>
$(document).ready(function(){
$("button#btn2").click(function() {
$("div#demo2").slideDown(1000, "swing" , function(){
alert("The image has been shown.");
});
});
});
</script>Output of the above code
In the above example, when the user click on the 'Start Sliding' button, the div box of 'demo2' id gets slide down according to the given sliding speed, swing easing and given function.
