Sliding Effect in jQuery:

In jQuery we have the slide method to give the sliding effect. With the slide method we can slide up and slide down the HTML elements.

There are three types of jQuery sliding methods:

  • slideDown()
  • slideUp()
  • slideToggle()

slideDown():

To slide down a HTML element in jQuery you have the slideDown() method.

Syntax:

          $(selector).slideDown(speed, callback);

In above syntax we passed two parameters in it. Both parameters are optional means if you don’t want to specify it the function will also work.

  • Speed: The speed parameter specifies the time or interval or duration of the effect. It take following values: “slow”, “fast” and “milliseconds”
  • Callback: The callback parameter will executed after the sliding completes.

Example:

slideUp():

To slide up a HTML element in jQuery you have the slideUp() method.

Syntax:

          $(selector).slideUp(speed, callback);

In above syntax we passed two parameters in it. Both parameters are optional means if you don’t want to specify it the function will also work.

  • Speed: The speed parameter specifies the time or interval or duration of the effect. It take following values: “slow”, “fast” and “milliseconds”
  • Callback: The callback parameter will executed after the sliding completes.

Example:

slideToggle():

If you want to do slide up and slide down with the help of clicking only one button. Means the slideToggle() function is use to toggle between slideUp() and slideDown().

If the HTML element is slide up than the slideToggle() will slide down them.

If the HTML element is slide down than the slideToggle() will slide up them.

Syntax:

          $(selector).slideToggle(speed, callback);

In above syntax we passed two parameters in it. Both parameters are optional means if you don’t want to specify it the function will also work.

  • Speed: The speed parameter specifies the time or interval or duration of the effect. It take following values: “slow”, “fast” and “milliseconds”
  • Callback: The callback parameter will executed after the sliding completes.

Example:

Leave a Reply

Your email address will not be published. Required fields are marked *