Design a site like this with WordPress.com
Get started

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
  }); 

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: