jQuery Api SlideUp() Animation Example

jQuery Animation slideUp() Method – how to use this method with html elements . Here you will learn how to create slide motion effect using jQuery.

jQuery slideUp Animation Effect

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

Syntax

 $(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.

Spread the love

Be First to Comment

Leave a Reply

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