Description:
Jquery slideUp() method is used to slide UP the matched element with a sliding motion.
Syntax
.slideUp( duration, easing, complete/callback )
Ex :
|
1 2 3 4 |
$("#div").slideUp("slow", function() { // Execute after Animation completed. }); |
| 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, slideUp() method will slide UP the selected/matched element and finally “display:none” will append to the div to make it hidden. In other word, the .slideUp() method animates the height of the matched elements. Once the height reaches 0 then the “display” style property is set to “none”.
|
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 Up” button, then the “divpanelBox” will slideUp with animation. Finally “display:none” will append to the div to make it hidden.
Leave A Comment