jQuery slideUp()

jQuery slideUp() can be applied on HTML element to generate a sliding up effect. Usually, the initial state of the HTML element is visible, so that when slideUp effect is applied, the HTML slides up and disappears.

Syntax - jQuery slideUp()

Following is the syntax to use jQuery slideUp() function

  • jQuery slideUp - Default

    To slide up a selected HTML Element with default timing,
     $("htmlElement").slideUp();
  • jQuery slideUp - slow/fast

    You can also provide a "slow" or "fast" argument to the slideUp() method to make the sliding effect slow or fast respectively.
     $("htmlElement").slideUp("slow");
     $("htmlElement").slideUp("fast");
  • jQuery slideUp - Time in milliseconds

    To control the sliding speed precisely, you can provide time in milliseconds as the argument to jQuery slideUp() method
     $("htmlElement").slideUp(4000); // for 4000 milliseconds
  • jQuery slideUp - Callback Function

    You can also provide an optional callback function as second argument to slideUp(), to execute when the sliding effect is completed on the HTML element.
     $("htmlElement").slideUp(4000, function(){
       alert("Sliding is completed.")
    });

Examples - jQuery slideUp()

Following examples help you understand the usage of jQuery slideUp() method :

Example - Basic jQuery slideUp()

Following is a simple example to show the usage of jQuery slideUp() function

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#slideUpBtn").click(function(){
    $("#div1").slideUp();
  });
});
</script>
</head>
<body>

<p>jQuery slideUp() example</p>

<button id="slideUpBtn">Click to slide up the below div</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideUp</a>
</div>
</div>
</body>
</html>
Try Online

Example - jQuery slideUp("slow"), slideUp("fast")

"slow", "fast" are two quick options that help you control the speed of the sliding effect.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#slideUpBtn").click(function(){
    $("#div1").slideUp("slow");
    $("#div2").slideUp("fast");
  });
});
</script>
</head>
<body>

<p>jQuery slideUp() example</p>

<button id="slideUpBtn">Click to slide up the below div</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideUp slow</a>
</div><br>

<div id="div2" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideUp fast</a>
</div>

</div>
</body>
</html>
Try Online

Example - jQuery slideUp(time_in_milliseconds)

You can also control the sliding speed at the precision of milliseconds. Provide a value in milliseconds as first argument.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#slideUpBtn").click(function(){
    $("#div1").slideUp(4000);
    $("#div2").slideUp(1000);
  });
});
</script>
</head>
<body>

<p>jQuery slideUp() example</p>

<button id="slideUpBtn">Click to slide up the below div</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideUp - in 4000 milliseconds</a>
</div><br>

<div id="div2" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideUp - in 1000 milliseconds</a>
</div>

</div>
</body>
</html>
Try Online

Example - jQuery slideUp() with callback function

Callback function is an optional second argument. The callback function is called when the slide-up /slide-down effect is completed. In the following example, we have provided a callback function with alert statement inside the body. You can provide your own statements inside the callback function.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#slideUpBtn").click(function(){
    $("#div1").slideUp(4000, function(){
      alert("Sliding is done.");
    });
  });
});
</script>
</head>
<body>

<p>jQuery slideUp() example</p>

<button id="slideUpBtn">Click to slide up the below div</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideUp with Callback function</a>
</div>

</div>
</body>
</html>
Try Online

Conclusion

In this jQuery Tutorial, we have learnt jQuery slideUp() method : Syntax and Usage with examples.