jQuery slideDown()
jQuery slideDown() can be applied on a hidden HTML element to generate a slide down effect. When slide down effect is applied, the display attribute of element is changed to visible. The transition though happens as sliding down.
If the HTML element is already visible, no slide down effect is applied on it.
In this tutorial, you will learn about jQuery slideDown() method, its syntax and usage, with examples.
Syntax – jQuery slideDown()
Following is the syntax to use jQuery slideDown() function
1. jQuery slideDown – Default
To slide down a selected HTML Element with default timing,
$("htmlElement").slideDown(); 2. jQuery slideDown – slow/fast
You can also provide a “slow” or “fast” argument to the slideDown() method to make the sliding effect slow or fast respectively.
$("htmlElement").slideDown("slow");
$("htmlElement").slideDown("fast"); 3. jQuery slideDown – Time in milliseconds
To control the sliding speed precisely, you can provide time in milliseconds as the argument to jQuery slideDown() method.
$("htmlElement").slideDown(4000); // for 4000 milliseconds 4. jQuery slideDown – Callback Function
You can also provide an optional callback function as second argument to slideDown(), to execute when the sliding effect is completed on the HTML element.
$("htmlElement").slideDown(4000, function(){
alert("Sliding is completed.")
}); Examples – jQuery slideDown()
The following examples help you understand the usage of jQuery slideDown() method.
1. Example – Basic jQuery slideDown()
Following is a simple example to show the usage of jQuery slideDown() function.
2. Example – jQuery slideDown(“slow”), slideDown(“fast”)
“slow”, “fast” are two quick options that help you control the speed of the sliding effect.
3. Example – jQuery slideDown(time_in_milliseconds)
You can also control the sliding speed at the precision of milliseconds. Provide a value in milliseconds as first argument.
4. Example – jQuery slideDown() with callback function
Callback function is an optional second argument. The callback function is called when the slide-down effect is completed. In the following example, we have provided a callback function with alert statement inside the body. You can provide your own statements inside the callback function.
Conclusion
In this jQuery Tutorial, we have learnt jQuery slideDown() method : Syntax and Usage with examples.