jQuery - Fade and Slide methods

In this tutorial we will learn about different fade and slide methods in jQuery.

Fade

We use the different fade methods to animate the opacity property of an element.

Following are the fade methods that we are going to discuss in this tutorial.

• fadeIn()
• fadeOut()
• fadeTo()
• fadeToggle()

fadeIn()

We use the fadeIn() method to fade the element to opaque.

In the following example we have a div having id "sample-div1". The div is initially hidden and we are going to make it fade in using the fadeIn() method.

HTML

<div id="sample-div1">
  <p>Hello World</p>
</div>

CSS

#sample-div1 {
  display: none;
}

jQuery

$("#sample-div1").fadeIn();

We can also control the duration of the fade in animation by passing the duration in milliseconds. And we can also run a function after the fade in completes.

Syntax

$(selector).fadeIn(duration, complete);

In the following example we are going to fade in the div having id "sample-div1" in 2000 milliseconds. The div is initially hidden. Once the fade in animation is complete we are going to print "Done!" in the browser console.

HTML

<div id="sample-div1">
  <p>Hello World</p>
</div>

CSS

#sample-div1 {
  display: none;
}

jQuery

$("#sample-div1").fadeIn(2000, function(){
  console.log("Done!");
});

fadeOut()

This is the opposite of the fadeIn method and it will make the element hidden by animating its opacity property.

Syntax

$(selector).fadeOut(duration, complete);

Both duration and the complete function are optional.

In the following example we have a div having id "sample-div1" which is visible initially. We are going to fade out the div in 5000 milliseconds and once the animation is complete we will print "Done!" in the browser console.

HTML

<div id="sample-div1">
  <p>Hello World</p>
</div>

jQuery

$("#sample-div1").fadeOut(5000, function(){
  console.log("Done!");
});

fadeTo()

We use the fadeTo() method to set the opacity of the element to a given value.

Syntax

$(selector).fadeTo(duration, opacity, complete);

The complete function is optional.

In the following example we have a div having id "sample-div1". We are going to fade the div to 50% opacity i.e., we will set the opacity to 0.5 and we are going to use 5000 milliseconds duration. And we have a function that will be executed after the fadeTo method is complete.

HTML

<div id="sample-div1">
  <p>Hello World</p>
</div>

jQuery

$("#sample-div1").fadeTo(5000, 0.5, function(){
  console.log("Done!");
});

fadeToggle()

We use the fadeToggle() method when we want to toggle between fade in and fade out.

Syntax

$(selector).fadeToggle(duration, complete);

Both duration and complete function is optional.

In the following example we have div having id "sample-div1". When we click the "Toggle" button we can fadein and fadeout the div.

HTML

<div id="sample-div1">
  <p>Hello World</p>
</div>
<button id="toggleBtn">Toggle</button>

jQuery

$("#toggleBtn").on("click", function(){
  console.log("Clicked!");
  $("#sample-div1").fadeToggle(200, function(){
    console.log("Done!");
  });
});

Slide

We use the different sliding methods to slide the element up, down and toggle.

Following are the sliding methods that we are going to discuss in this tutorial.

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

slideDown()

We use the slideDown() method when we want to slide and show the element.

Syntax

$(selector).slideDown(duration, complete);

Both duration and complete function are optional.

In the following example we have a div having id "sample-div1" and it is hidden. We are going to slide it down and show its content using the slideDown() method. We will animate the slide down for 500 milliseconds and when the animation is complete we will print "Done!" in the browser console.

HTML

<div id="sample-div1">
  <p>Hello World</p>
</div>

CSS

#sample-div1 {
  display: none;
}

jQuery

$("#sample-div1").slideDown(500, function(){
  console.log("Done!");
});

slideUp()

We use the slideUp() method when we want to slide and hide the element.

Syntax

$(selector).slideUp(duration, complete);

Both duration and complete function are optional.

In the following example we have a div having id "sample-div1". We are going to slide it up and hide its content using the slideUp() method. We will animate the slide up for 500 milliseconds and when the animation is complete we will print "Done!" in the browser console.

HTML

<div id="sample-div1">
  <p>Hello World</p>
</div>

jQuery

$("#sample-div1").slideUp(500, function(){
  console.log("Done!");
});

slideToggle()

We use the slideToggle() method when we want to toggle between slide up and slide down.

Syntax

$(selector).slideToggle(duration, complete);

Both duration and complete function are optional.

In the following example we have a div having id "sample-div1". When we click the "Toggle" button we can slide up and slide down the div.

HTML

<div id="sample-div1">
  <p>Hello World</p>
</div>

jQuery

$("#toggleBtn").on("click", function(){
  console.log("Clicked!");
  $("#sample-div1").slideToggle(200, function(){
    console.log("Done!");
  });
});

That's all for this tutorial. Have fun coding :-)