Description:
Jquery slideUp() method is used to slide UP the matched element with a sliding motion.
Syntax
.slideUp( duration, easing, complete/callback )
Ex :
$("#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”.
<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 Up” button, then the “divpanelBox” will slideUp with animation. Finally “display:none” will append to the div to make it hidden.
