fadeIn vs fadeOut vs fadeTo

Question

What is the difference between fadeIn vs fadeOut vs fadeTo ?

Answer 1

I see only linguistic redundance here, since fadeTo fits all the use cases regardless.

Answer 2

fadeIn fades from an elements current opacity to 1.
fadeOut fades from an elements current opacity to 0.
fadeTo fades from an elements current opacity to a given opacity.

$('#myObject').fadeTo('fast', 0.5, function() {
    $('#myObject').fadeTo('fast', 0.8);
});

The above fades myObject from whatever opacity it has, to 0.5, which is 50% transparency, and after that, it fades up again to 20% transparency.

Answer 3

FadeIn.. Shows an element gradually

FadeOut .. Hides an element gradually

FadeTo .. Changes the opacity of an element to a given value

Answer 4

Short Answer:

• fadeIn() and fadeOut() control the display property, while animating fade.
• fadeTo() controls the opacity property, while animating fade.

---

Long Answer:

fadeIn() and fadeOut() are both designed to control the display property, just like show() and hide(), but animating only a fade in between.

Process of fadeIn()

• Prep: Set to opacity:0.
• Process: Set to display:block.
• Process: Gradually change to opacity:1.

Process of fadeOut()

• Process: Gradually change to opacity:0.
• Process: Set to display:none.

fadeTo() is meant to set the opacity property, while animating a fade in between.

Process of fadeTo()

• Prep: Set to display: block.
• Process: Set to opacity: [$].

See the breakdown of formulas, which make up fadeIn() and fadeTo() on JsFiddle.

Update:

Closer relatives of fadeIn() and fadeOut() are rather show() and hide().

show() and hide() are also meant to control the display property, just like fadeIn()and fadeOut(), but in addition, animate width and height in between.

Process of show()

• Prep: Set to opacity:0, width:0, height:0
• Process: Set to display:block
• Process: Gradually change to opacity:1, width:[auto], height:[auto]

Process of hide()

• Process: Gradually change to opacity:0, width:0, height:0
• Process: Set to display:none.

Example:

Compare behavior of fadeIn(), fadeOut(), fadeTo(), show() and hide() on JsFiddle.