jQuery slideDown() Effect Method

jQuery Effect Methods

The slideDown() method displays the selected element in a sliding manner.

Note:This method is applicable to elements hidden by jQuery methods and set to display:none in CSS (not visibility:hidden).

This method is usually used withslideUp()Methods can be used together.

Syntax:

$(selector).slideDown(duration, "easing", callback)

Instance

When clicking on "#my-Div” is clicked, this example displays " .panel" on the page:

$("#my-Div").click(function(){
　　$(".panel").slideDown();
});

Slide down all <p> elements when the button is clicked:

$("button").click(function(){
　　$("p").slideDown();
});

UsedurationParameters:

$("button").click(function(){
　　$("p").slideDown(1500);
});

UsecallbackParameters:

$("button").click(function(){
　　$("div").slideDown(1500, function(){
　　　　alert("Slide down completed!");
　　});
});

Use slow duration and linear easing to slide down all " .panel":

$("#my-Div").click(function(){
　　$(".panel").slideDown("slow", "linear");
});

Animate all spans (in this example, words) for quick scrolling, in2Complete each animation within 00 milliseconds:

$("button").click(function(){
　　$("span:first-child").slideDown("fast", function(){
　　　　$(this).next().slideDown("fast", arguments.callee);
　　});
});

Parameter Value

jQuery Effect Methods