---

Search posts under jQuery:

---

.slideUp() - Hide using sliding effect in jQuery

How to hide an element using slide up effect in jQuery?

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

<input type="button" id="btnSlideUp" value="SlideUp" />

    <div id="divSlideUp" style="height: 50px; width: 50px; background: brown; left: 300px; position: absolute; display: ;">
    </div>

    <script>
        $("#btnSlideUp").click(function () {
            $("#divSlideUp").slideUp();
            // $("#divSlideUp").slideUp("slow", QueueIt);
        });
    </script>

In the above code snippet, on click of “btnSlideUp” the “divSlideUp” element will hide by slide up effect. We can also mention second parameter as function name that will execute when “divSlideUp” will be completely hidden.

The .hide() and .slideUp() both functions are functionally same however .hide() function simply hides the element and .slideUp() function hides the element with sliding effect.