JQuery Effect – Swipe

The JQuery swipe method allows elements to slide up and down.

Click here to hide/show the panel

Time is money, therefore, we provide you with quick and easy to understand learning content.

Here, you can get any knowledge you need in an easy-to-understand and convenient mode.

Instance

JQuery Slidedown ()
Demonstrates the JQuery Slidedown () method.

JQuery Slideup ()
Demonstrates the JQuery Slideup () method.

JQuery Slidetoggle ()
Demonstrates the JQuery Slidetoggle () method.

JQuery Sliding method

With JQuery, you can create slide effects on elements.

JQuery has the following sliding methods:

• Slidedown ()
• Slideup ()
• Slidetoggle ()

JQuery Slidedown () method

The JQuery Slidedown () method is used to slide the element down.

Grammar:

$( selector). Slidedown ( Speed,callback);

The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds.

The optional callback parameter is the name of the function that is executed after the slide is completed.

The following example demonstrates the Slidedown () method:

Instance $ ("#flip"). Click (function () {
$ ("#panel"). Slidedown ();
});
Try it?

JQuery Slideup () method

The JQuery Slideup () method is used to slide the element up.

Grammar:

$( selector). Slideup ( Speed,callback);

The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds.

The optional callback parameter is the name of the function that is executed after the slide is completed.

The following example demonstrates the Slideup () method:

Instance $ ("#flip"). Click (function () {
$ ("#panel"). Slideup ();
});
Try it?

JQuery Slidetoggle () method

The JQuery Slidetoggle () method can be toggled between the Slidedown () and the Slideup () method.

If the elements slide down, slidetoggle () can slide them up.

If the elements slide up, slidetoggle () can slide them down.

$( selector). Slidetoggle ( Speed,callback);

The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds.

The optional callback parameter is the name of the function that is executed after the slide is completed.

The following example demonstrates the Slidetoggle () method:

Instance $ ("#flip"). Click (function () {
$ ("#panel"). Slidetoggle ();
});
Try it?

JQuery Effect – Swipe