Introduction:

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

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

Syntax:

$(selector).slideUp(speed);
$(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="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel").slideUp("slow");
            });
        });
    </script>
    <style>
        #panel, #flip {
            padding: 5px;
            text-align: center;
            background-color: #ffdd00;
            border: solid 1px #c3c3c3;
            width: 590px;
        }
 
        #panel {
            padding: 50px;           
            background-color: #ffae00;
            width: 500px;
        }
    </style>
</head>
<body>
    <div id="flip">Click to slide Up panel</div>
    <div id="panel">
        Hello sqltutorialspoint.com!
        It is the best tutorial website to learn jQuery and other languages.
    </div>
 
</body>
</html>


 Output:

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.

0 comments


Leave a comment

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

you may also like