In this article, we will explain how to use slideUp() effect in jQuery with example .

To hide a html element using slide Up effect,  slideUp() method can be used.


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

speed: It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after completion of slideUp() effect.

Let's take an example to demonstrate jQuery slideUp() effect.

<!DOCTYPE html>
<html xmlns="">
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
        $(document).ready(function () {
            $("#flip").click(function () {
        #panel, #flip {
            padding: 5px;
            text-align: center;
            background-color: #ffdd00;
            border: solid 1px #c3c3c3;
            width: 590px;
        #panel {
            padding: 50px;           
            background-color: #ffae00;
            width: 500px;
    <div id="flip">Click to slide Up panel</div>
    <div id="panel">
        It is the best tutorial website to learn jQuery and other languages.


jQuery slideUp() effect

After clicking to slide Up panel then panel shown as below figure:

jQuery slideUp() effect

I hope it will help to you.


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like