---

Search posts under jQuery:

---

.slideDown() - Slide down effect in jQuery

How to display an element using slide down effect in jQuery?

To display a html element using slide down effect, slideDown() method can be used.

    <input type="button" id="btnSlideDown" value="SlideDown" />

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

    <script>
        $("#btnSlideDown").click(function () {
            $("#divSlideDown").slideDown();
            // $("#divSlideDown").slideDown("slow", QueueIt);
        });
    </script>

In the above code, on click of the “btnSlideDown” button “divSlideDown” element will be shown with sliding down effect. We may also mention second parameter as the function to execute when “divSlideDown” element will be completely shown.

 <script>
        $("#btnSlideDown").click(function () {
            $("#divSlideDown").slideDown("slow", QueueIt);
        });

        function QueueIt() {
            $("#divQueue").show("slow");
            $("#divQueue").animate({ left: '+=400px' }, 2000);
            $("#divQueue").animate({ left: '-=400px' }, 2000);
            $("#divQueue").hide("fast", QueueIt);
        }
    </script>

In the above code, We have specified “QueueIt” function that will execute when slideDown effect is complete and QueueIt function basically animates the "divQueue" and keep doing as the last animation of .hide() function also has QueueIt function as 2^nd parameter.