HTML CSS JAVASCRIPT JQUERY LIQUID

jQuery Effects - Sliding

❮ Previous Next ❯

jQuery Sliding Methods

You can use jQuery to make things slide smoothly on a webpage.

jQuery offers these slide methods:

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

jQuery slideDown() Method

The jQuery method called slideDown() is used to make an element appear by sliding it downward.

Syntax:

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

You can set how fast or slow the effect happens with the speed option. You have three choices: "slow," "fast," or you can specify the speed in milliseconds.

The "callback" part is like a special function that can be chosen to run after the sliding is done.

Here's an example that shows how to use the slideDown() method:

Example

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

jQuery slideUp() Method

The jQuery method called slideUp() helps to make an element go up in a smooth way.

Syntax:

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

You can control how fast an effect happens using the "speed" option. You can choose from these options: "slow" (slower), "fast" (faster), or you can specify the exact duration in milliseconds.

The callback is an extra function that runs when the sliding is finished.

Here's an example that shows how to use the slideUp() method:

Example

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

jQuery slideToggle() Method

The jQuery code snippet with the class "ppt-codespan" for the "slideToggle()" method can switch between the "slideDown()" and "slideUp()" methods.

When you slide elements down, the slideToggle() function will slide them back up.

If the objects have been moved upwards, the slideToggle() function will make them slide back down.

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

You can choose how fast something happens by using the "speed" option. You can set it to be "slow," "fast," or specify the exact time in milliseconds.

The "optional callback parameter" is a special feature that allows you to specify a function. This function will run once the sliding action is finished.

In this example, we illustrate the use of the slideToggle() method, which allows for toggling or switching between visible and hidden states.

Example

$("#flip").click(function(){
  $("#panel").slideToggle();
});
Try it Yourself »
❮ Previous Next ❯