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>Example of jQuery slideUp method</title>
    <script type="text/javascript" src=""></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.

 Let's check live example

Leave a comment

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

You may also like