jQuery SlideUp() Effect Method Example

jQuery Animation slideUp() Method; In this tutorial, you will learn how to use this method with html elements.

jQuery SlideUp() Effect Method Example

slideUp() is a method in the jQuery library that provides a way to animate the hiding of elements by gradually reducing their height to 0. This creates a sliding-up effect as the element disappears from view. It’s commonly used to create smooth and visually pleasing animations when elements are being hidden or shown on a web page.

Here’s the basic syntax of the slideUp() method:

 $(selector).slideUp();  
$(selector).slideUp(speed, callback);
$(selector).slideUp(speed, easing, callback);

Parameters of slideUp method

  • speed :- The argument ‘speed‘ determines the duration of this effect.
  • easing :- It specifies the easing function to be used for transition.
  • callback :- Ihis is an optional parameter. you can specify what to do after the slideUp() method is called.

jQuery SlideUp() example

In the below example you can see that slideUp() method effect.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Up</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn-up").click(function(){
    $(".slideDiv").slideUp("slow")
  });
});
</script>

<style>
.slideDiv
{
    padding:5px;
    text-align:center;
    background-color:yellow;
    border:solid 1px;
}
.slideDiv
{
    padding:50px;
}
</style>
</head>
<body>

<button id="btn-up">Click Me to slide Up</button>
<div class="slideDiv"><b>Hello</b> <br><br>Thank for trying this</div>

</body>
</html>

In this above example of slideDown() method, you can see that slideDown() effect on html elements.

SlideUp () and callback example

<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Up</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn-up").click(function(){
    $(".slideDiv").slideUp("slow", function(){
    	alert("The slideUp effect is completed.");
    });
  });
});
</script>

<style>
.slideDiv
{
    padding:5px;
    text-align:center;
    background-color:yellow;
    border:solid 1px;
}
.slideDiv
{
    padding:50px;
}
</style>
</head>
<body>

<button id="btn-up">Click Me to slide Up</button>
<div class="slideDiv"><b>Hello</b> <br><br>Thank for trying this</div>

</body>
</html>

In this above example of slideUp() method with callback, you can see that slideUp() effect with callback on html elements.

Recommended jQuery Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *