Description:
Jquery slideDown() method slide down the matched elements with a sliding motion.
Syntax
.slideDown( duration, easing, complete/callback )
Ex :
|
1 2 3 4 |
$("#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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html> <head> <script src="http://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.
