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.

In this tutorial, you will learn about jQuery slideUp() method, its syntax and usage, with examples.

Syntax – jQuery slideUp()

Following is the syntax to use jQuery slideUp() function

1. jQuery slideUp – Default

To slide up a selected HTML Element with default timing,

</>
Copy
$("htmlElement").slideUp();

2. 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.

</>
Copy
$("htmlElement").slideUp("slow");
$("htmlElement").slideUp("fast");

3. jQuery slideUp – Time in milliseconds

To control the sliding speed precisely, you can provide time in milliseconds as the argument to jQuery slideUp() method.

</>
Copy
$("htmlElement").slideUp(4000); // for 4000 milliseconds

4. 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.

</>
Copy
$("htmlElement").slideUp(4000, function(){
   alert("Sliding is completed.")
});

Examples – jQuery slideUp()

The following examples help you understand the usage of jQuery slideUp() method.

1. Example – Basic jQuery slideUp()

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

</>
Copy
<!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>

2. Example – jQuery slideUp(“slow”), slideUp(“fast”)

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

</>
Copy
<!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>

3. 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.

</>
Copy
<!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>

4. 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.

</>
Copy
<!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>

Conclusion

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