当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - fadeIn vs fadeOut vs fadeTo

问题描述:

What is the difference between fadeIn vs fadeOut vs fadeTo ?

网友答案:

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.

网友答案:

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.

网友答案:

FadeIn.. Shows an element gradually

FadeOut .. Hides an element gradually

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

网友答案:

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: