jQuery fadeTo() Method

Syntax:

$(selector).fadeTo(speed,opacity,callback);

The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

jQuery fadeToggle() Method

Syntax:

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

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery fadeOut() Method

Syntax:

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

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

jQuery fadeIn() Method

Syntax:

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

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

jQuery Fading Methods

jQuery has the following fade methods:

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

jQuery toggle()

With jQuery, you can toggle between the hide() and show() methods with the toggle() method.

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

jQuery hide() and show()

Syntax:

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

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

callback : The optional callback parameter is a function to be executed after the hide() or show() method completes

speed : The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.

$("button").click(function(){
  $("p").hide(1000);
});

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});