Fading in jQuery

There are four main fading effects in jQuery that can be applied to the HTML elements. They can be applied using these 4 methods:

fadeIn() //to fade in a hidden element
fadeOut() //to fade out a visible element
fadeToggle() // toggles between fadeOut() and fadeIn() 
fadeTo() //fading to a given opacity (value between 0 and 1)

These methods can also be parameterized but it is optional

Parameters of fadeIn(), fadeout() and fadetoggle()

there are two optional parameters for these 3 fading methods: ‘speed’ and ‘callback’

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

// speed can be "slow", "fast", or milliseconds
//callback parameter is a function to be executed after the fading completes

Example

$("button").click(function(){
  $("#divA").fadeIn();
  $("#divB").fadeIn("fast");
  $("#divC").fadeIn(2000); //2000 milliseconds
  $("#divD").fadeOut();
  $("#divE").fadeOut("slow"); 
  $("#divF").fadeOut(2000); //2000 milliseconds
  $("#divG").fadeToggle(); 
  $("#divH").fadeToggle("fast"); 
  $("#divB").fadeToggle(2000); //2000 milliseconds
});

Parameters of fadeto()

fadeTo() has an additional parameter of opacity. As this method is specifically for opacity so it is a required parameter whereas callback and speed are optional parameters for the fadeTo() method 

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

// speed can be "slow", "fast", or milliseconds
//fading to a given opacity (value between 0 and 1).
//callback parameter is a function to be executed after the fading completes

Example

$("button").click(function(){
  $("#divA").fadeTo("fast", 0.25); //25% opacity
  });

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Blog at WordPress.com.

Up ↑

Design a site like this with WordPress.com
Get started