jQuery Introduction | Effects | Slide Effects .slideUp() .slideDown() .slideToggle()

Slide Effects

In jQuery, a slide effect is expressed by quickly changing the CSS height property value of the relevant element. The methods used to express this slide effect are as follows.

.slideUp() Method - Slide Up

The .slideUp() method shows an effect where the selected element gradually moves up and disappears.

The following example makes the element whose id is "divBox1" move up and disappear.

$("#divBox1").slideUp(); // If no argument is specified, it moves up and disappears over 400 ms, or 0.4 seconds.

You can also control the speed of the slide effect by specifying a number of milliseconds as an argument.

$("#divBox2").slideUp(500); // Makes the element whose id is "divBox2" move up and disappear over 0.5 seconds.

You can also control the speed of the slide effect by specifying reserved words such as "slow" or "fast".

$("#divBox3").slideUp("fast");   

Run code

.slideDown() Method - Slide Down

The .slideDown() method shows an effect where the selected element gradually moves down and appears.

The following example makes the element whose id is "divBox1" move down and appear.

$("#divBox1").slideDown(); // If no argument is specified, it moves down and appears over 0.4 seconds, or 400 ms.

You can also control the speed of the slide effect by specifying a number of milliseconds as an argument.

$("#divBox2").slideDown(500); // Makes the element whose id is "divBox2" move down and appear over 0.5 seconds.

You can also control the speed of the slide effect by specifying reserved words such as "slow" or "fast".

$("#divBox3").slideDown("fast");   

Run code

.slideToggle() Method - Slide Toggle

jQuery provides the .slideToggle() method, which performs different actions depending on the current display state of the selected element. If the selected element is currently hidden, it performs the action of .slideDown(). If it is visible, it performs the action of .slideUp().

$("#divBox1").slideToggle(); 
$("#divBox2").slideToggle(500); // The element whose id is "divBox2" moves up and disappears or moves down and appears over 0.5 seconds.
$("#divBox3").slideToggle("fast"); // The element whose id is "divBox3" quickly moves up and disappears or moves down and appears.

Run code