jQuery Effects - Slide

jQuery provides a simple interface to perform various amazing effects.

jQuery effect methods allow us to quickly apply common effects with minimal configuration.

jQuery sliding methods

With jQuery, we can create sliding effects on elements.

We have the following jQuery slideshow methods:

• slideUp()

• slideDown()

• slideToggle()

Below, I will show you how to use each sliding method.

jQuery slideUp() and slideDown()

slideUp()The method hides the selected element by sliding.

slideDown()The method displays the selected element in a sliding manner.

The following example demonstrates the usage of slideUp() and slideDown() methods:

//　Slide up paragraph
　$("#btn1).click(function(){
　　　　　　$("p").slideUp();
});
//　Slide down paragraph
　$("#btn2).click(function(){
　　　　　　$("p").slideDown();
});

This isslideUp() The syntax of the method is:

$(selector).slideUp(duration, easing, callback);

This isslideDown()The syntax of the method is:

$(selector).slideDown(duration, easing, callback);

RegardlessslideUp()andslideDown()The method accepts three optional parameters:

• duration -Determine how long the sliding effect will run. Possible values: “slow”, “fast” or milliseconds

• easing -Indicate the easing function to be used for the transition. Possible values: “swing”, “linear”

• callback-Specify the function to call after the sliding method is completed

The following example demonstrates the use of slideUp() and slideDown() withdurationParameters:

$("#btn1).click(function(){
　　$("p").slideUp(1500);
});
$("#btn2).click(function(){
　　$("p").slideDown(1500);
});

The following example demonstrates the use of slideUp() and slideDown() withCallbackParameters:

$("#btn1).click(function(){
　　$("div").slideUp(1500, function(){
　　　　alert("Slide up completed!");
　　});
});
$("#btn2).click(function(){
　　$("div").slideDown(1500, function(){
　　　　alert("Slide down completed!");
　　});
});

Animate all spans (in this case, words) to slide quickly, in200 milliseconds to complete each animation:

$("button").click(function(){
　　$("span:last-child).slideUp("fast", function(){
　　　　$(this).prev().slideUp("fast", arguments.callee);
　　});
});

jQuery slideToggle() method

We can also useslideToggle()The method toggles between HTML elements by swiping up and down.

If the selected element is initially displayed, it will be hidden; if it is hidden, it will be displayed.

The following example toggles between slideUp and slideDown of elements when the button is clicked:<p>Toggle between slideUp and slideDown of elements:

$("button").click(function(){
　　$("p").slideToggle(1500);
});

This isslideToggle()The syntax of the method is:

$(selector).slideToggle(duration, easing, callback);

slideToggle()The method accepts three optional parameters:

• duration -Determine how long the sliding effect will run. Possible values: “slow”, “fast” or milliseconds

• easing -Indicate the easing function to be used for the transition. Possible values: “swing”, “linear”

• callback-Specify a function to call after the slideToggle() method completes

jQuery Effect Reference

For a complete effect reference, please visit ourjQuery Effect Reference Manual.