.slideUp() Effect in Jquery

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.
});

$("#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>

<html>

<head>

$(document).ready(function () {

$("#divflipBox").click(function () {

$("#divpanelBox").slideDown("slow");

});

</script>

#divflipBox, #divpanelBox{

background-color:#a0ce4e;

border:solid 1px #c3c3c3;

width:25%;

}

#divpanelBox{

padding: 30px;

display: none;

}

</style>

</head>

<body>

Click to slide down</div>

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.

.slideUp() Effect in Jquery