jQuery slideUp()
jQuery slideUp() can be applied on HTML element to generate a sliding up effect. Usually, the initial state of the HTML element is visible, so that when slideUp effect is applied, the HTML slides up and disappears.
In this tutorial, you will learn about jQuery slideUp() method, its syntax and usage, with examples.
Syntax – jQuery slideUp()
Following is the syntax to use jQuery slideUp() function
1. jQuery slideUp – Default
To slide up a selected HTML Element with default timing,
$("htmlElement").slideUp(); 2. jQuery slideUp – slow/fast
You can also provide a “slow” or “fast” argument to the slideUp() method to make the sliding effect slow or fast respectively.
$("htmlElement").slideUp("slow");
$("htmlElement").slideUp("fast"); 3. jQuery slideUp – Time in milliseconds
To control the sliding speed precisely, you can provide time in milliseconds as the argument to jQuery slideUp() method.
$("htmlElement").slideUp(4000); // for 4000 milliseconds 4. jQuery slideUp – Callback Function
You can also provide an optional callback function as second argument to slideUp(), to execute when the sliding effect is completed on the HTML element.
$("htmlElement").slideUp(4000, function(){
alert("Sliding is completed.")
}); Examples – jQuery slideUp()
The following examples help you understand the usage of jQuery slideUp() method.
1. Example – Basic jQuery slideUp()
Following is a simple example to show the usage of jQuery slideUp() function.
2. Example – jQuery slideUp(“slow”), slideUp(“fast”)
“slow”, “fast” are two quick options that help you control the speed of the sliding effect.
3. Example – jQuery slideUp(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 slideUp() with callback function
Callback function is an optional second argument. The callback function is called when the slide-up /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 slideUp() method : Syntax and Usage with examples.