Description:
Jquery slideDown() method slide down the matched elements with a sliding motion.
Syntax
.slideDown( duration, easing, complete/callback )
Ex :
$("#div").slideDown("slow", function()
{
// Animation complete.
});
| Duration/speed | It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400). Duration are given in milliseconds and higher values indicate slower animations, not faster ones. |
| Easing | It specifies the easing function to be used for transition (default value: swing). |
| Callback | A function to call once the animation is complete. |
Example:
From the below code, slideDown() method will apply slide down to the selected element and apply “display:block” to the element. The .slideDown() method animates the height of the matched elements. This causes lower parts of the page to slide down, making way for the revealed items.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#divflipBox").click(function () {
$("#divpanelBox").slideDown("slow");
});
});
</script>
<style type="text/css">
#divflipBox, #divpanelBox{
background-color:#a0ce4e;
border:solid 1px #c3c3c3;
width:25%;
}
#divpanelBox{
padding: 30px;
display: none;
}
</style>
</head>
<body>
<div id="divflipBox">
Click to slide down</div>
<div id="divpanelBox">
Hello Welcome to dotnet-helpers.com
Learn MVC, ASP , JQuery with best examples. Thanks for visiting.
</div>
</body>
</html>Output:
After clicking the “Click to slide down” button, then the “divpanelBox” will slide down with animation. Finally “display:block” will append to the div to make it visible.
