WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Effects - Sliding


The jQuery slide techniques slide components up and down.

Click to slide down/up the panel

Because time is profitable, we convey fast and simple learning.

At welookups, you can examine all that you have to learn, in an open and helpful format.


Examples

jQuery slideDown()
Shows the jQuery slideDown() method.

jQuery slideUp()
Shows the jQuery slideUp() method.

jQuery slideToggle()
Shows the jQuery SlideToggle() method.


jQuery Sliding Methods

With jQuery you can make a sliding impact on elements.

jQuery has the accompanying slide methods:

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

jQuery slideDown() Method

The jQuery slideDown() technique is utilized to slide down an element.

Syntax:

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

The discretionary speed parameter indicates the span of the impact. It can take the accompanying qualities: "slow", "fast", or milliseconds.

The discretionary callback parameter is a capacity to be executed after the sliding completes.

The following precedent exhibits the slideDown() method:

Example

$("#flip").click(function(){
    $("#panel").slideDown();
});
Try it yourself »

jQuery slideUp() Method

The jQuery slideUp() strategy is utilized to slide up an element.

Syntax:

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

The discretionary speed parameter determines the term of the impact. It can take the accompanying qualities: "slow", "fast", or milliseconds.

The discretionary callback parameter is a capacity to be executed after the sliding completes.

The following precedent exhibits the slideUp() method:

Example

$("#flip").click(function(){
    $("#panel").slideUp();
});
Try it yourself »

jQuery slideToggle() Method

The jQuery slideToggle() strategy flips between the slideDown() and slideUp() methods.

If the components have been slid down, slideToggle() will slide them up.

If the components have been slid up, slideToggle() will slide them down.

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

The discretionary speed parameter can take the accompanying qualities: "slow", "fast", milliseconds.

The discretionary callback parameter is a capacity to be executed after the sliding completes.

The following model exhibits the slideToggle() method:

Example

$("#flip").click(function(){
    $("#panel").slideToggle();
});
Try it yourself »