jQuery SlideUp() Animation Example

jQuery Animation slideUp() Method; Through this tutorial, i am going to show you what is jQuery slideUp animation effect method and how to use this method with html elements.

jQuery SlideUp() Animation Method

Using SlideUp () methods, HTML elements are used to gradually decrase their height (i.e., sliding them up).

Syntax jQuery SlideUp() Animation Method

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

Parameters of jQuery SlideUp() Animation 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.

Example 1 – jQuery SlideUp() Animation Method

See that slideUp() animation method effect; as shown below:

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

Example 2 – jQuery SlideUp() Animation Method with callback

See that slideUp() animation method effect with callback; as shown below:

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

Recommended jQuery Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.