fadeIn vs fadeOut vs fadeTo

Question

fadeIn与fadeOut与fadeTo之间的差异是什么？

Answer 1

fadeIn从元素当前不透明度衰减为1 fadeOut从元素当前不透明度衰减为0 fadeTo从元素当前不透明度淡化为给定的不透明度。

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

以上将myObject从任何不透明度淡化为0.5，即透明度为50％，之后，它再次淡化至20％的透明度。

Answer 2

简答：

• fadeIn（）和 fadeOut（）控制display属性，同时动画淡化。
• fadeTo（）控制opacity属性，同时动画淡化。

---

长答案：

fadeIn（）和 fadeOut（）都设计用于控制display属性，就像show（）和hide（）一样，但仅限动画两者之间的淡出。

fadeIn（）

的过程

• 准备：设置为opacity:0。
• 流程：设置为display:block。
• 流程：逐渐更改为opacity:1。

fadeOut（）

的过程

• 流程：逐渐更改为opacity:0。
• 流程：设置为display:none。

fadeTo（）用于设置opacity属性，同时为之间的淡入淡出动画。

fadeTo（）

的过程

• 准备：设置为display: block。
• 流程：设置为opacity: [$]。

请参阅JsFiddle上的breakdown of formulas, which make up fadeIn() and fadeTo()。

<强>更新

fadeIn（）和fadeOut（）的近亲更像是show（）和hide（）。

show（）和 hide（）也意味着控制display属性，就像fadeIn（）和fadeOut（）一样，但另外，动画之间的宽度和高度。

show（）

的过程

• 预备设置为opacity:0，width:0，height:0
• 流程：设置为display:block
• 流程：逐步更改为opacity:1，width:[auto]，height:[auto]

hide（）

的过程

• 流程：逐步更改为opacity:0，width:0，height:0
• 流程：设置为display:none。

示例：

在JsFiddle上比较behavior of fadeIn(), fadeOut(), fadeTo(), show() and hide()。

Answer 3

FadeIn ..逐渐显示元素

FadeOut ..逐渐隐藏元素

FadeTo ..将元素的不透明度更改为给定值

Answer 4

我在这里只看到语言冗余，因为fadeTo适合所有用例，无论如何。