Latest web development tutorials

jQuery effects - slide

jQuery slide element method can slide up and down.

Click here to hide / display panel

Time is money, so we provide fast and easy to understand learning content for you.

Here, you can understand by means of a convenient mode to obtain any knowledge you need.

Examples

jQuery slideDown ()
Demo jQuery slideDown () method.

jQuery slideUp ()
Demo jQuery slideUp () method.

jQuery slideToggle ()
Demo jQuery slideToggle () method.

jQuery slide methods

By jQuery, you can create a slide effect on the element.

jQuery has the following slide methods:

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

jQuery slideDown () method

jQuery slideDown () method is used to slide down elements.

grammar:

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

The optional speed parameter specifies the duration of the effect. It may take the following values: "slow", "fast", or milliseconds.

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

The following example demonstrates slideDown () method:

Examples

$("#flip").click(function(){
$("#panel").slideDown();
});

try it"

jQuery slideUp () method

jQuery slideUp () method is used to slide up elements.

grammar:

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

The optional speed parameter specifies the duration of the effect. It may take the following values: "slow", "fast", or milliseconds.

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

The following example demonstrates slideUp () method:

Examples

$("#flip").click(function(){
$("#panel").slideUp();
});

try it"

jQuery slideToggle () method

jQuery slideToggle () method can be switched between slideDown () and slideUp () method.

If the sliding element downward, the slideToggle () can slide them up.

If you slide up element, slideToggle () can slide them down.

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

The optional speed parameter specifies the duration of the effect. It may take the following values: "slow", "fast", or milliseconds.

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

The following example demonstrates slideToggle () method:

Examples

$("#flip").click(function(){
$("#panel").slideToggle();
});

try it"