jQuery Tutorial

jQuery slideUp method to hide the elements sliding up

jQuery slideUp method to hide the selected elements sliding up

In jQuery, slideUp method is used to hide or invisible the selected elements in the web page.

jquery slideUp syntax

$(selector).slideUp()


$(selector).slideUp(speed of animation, easing, callback function)

In jQuery all the three parameters are optional for slideUp method.

Speed of animation

"fast" - hides the element faster.

"normal" - hides the element in normal.

"slow" - hides the element slower.

milliseconds - hides the element animation as based on specified milliseconds.

easing

"swing" - In middle of the animation is faster but slower in beginning and end of animation.

"linear" - Animation is consistent from beginning to end.

jQuery slideUp method example to hide the selected elements

This jQuery code is used to hide all the div elements in the page and displays the alert message 'Slide up method is completed testing!' once hidden the div element.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery slideUp method</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSlideUp').click(function () {
                $("div").slideUp(15000, "swing", function () {
                    alert("Slide up method is completed testing!")
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnSlideUp" value="Slide Up"/>
    <div style="height:200px;width:200px;background-color:blue;color:white;">
        div element slide up testing!
    </div>
</body>
</html>

Output:

div element

Hides div after clicking on Fade Out button

hidden the div after clicking on Slide Up button

jQuery slideUp with callback function

callback function is used to display the alert message once hidden when clicking on Slide Up button.

        $(document).ready(function () {
            $('#btnSlideUp').click(function () {
                $("div").slideUp(function () {
                   alert('call back function!');
                });
            });
        });

Hides the div element for 10000 milliseconds, animation mode is swing (In middle of animation is faster) and callback function is used to display alert message once div element is hidden.

        $(document).ready(function () {
            $('#btnSlideUp').click(function () {
                $("div").slideUp(10000,"swing", function () {
                    alert('slideUp example!')
                });
            });
        });

« Previous Next »

jQuery Programming Examples