How to use SlideUp() and SlideDown() Method in JQuery

In this article I am going to explain about Effect SlideUp() and SlideDown() method in jquery.
  • 2463

jQuery SlideUp() and SlideDown() Method.

jquery SlideUp() and SlideDown() method use for sliding effect on selected element. When execute SlideDown() and SlideUp() method then its change the height of selected element as like visible and hidden.

Syntax

$(selector).SlideDown()

 

$(selector).SlideUp()

Example

<html>

<head>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#bt1").click(function () {

                $("div").slideUp();

            });

            $("#bt2").click(function () {

                $("div").slideDown();

            });

        });

    </script>

</head>

<body>

    <div style="background-color: Blue; height: 50px; width: 200px;">

    </div>

    <button id="bt1">

        SlideUp</button>

    <button id="bt2">

        SlideDown</button>

</body>

</html>

Output

slide.jpg

You may also want to read these related articles: here
 
Ask Your Question 
 
Got a programming related question? You may want to post your question here
 

 

© 2020 DotNetHeaven. All rights reserved.