fadeIn vs fadeOut vs fadeTo

Question

有什么区别之间fadeInVS fadeOutVS fadeTo？

Answer 1

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

$('#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上的fadeIn()和fadeTo().

更新:

更接近fadeIn()和fadeOut()的亲戚更像是show()和hide().

show()和hide()也意味着控制display属性,就像fadeIn()和fadeOut()一样,但另外,它们之间的动画宽度和高度.

节目的过程()

• 准备:设置为opacity:0,width:0,height:0
• 过程:设置为display:block
• 过程:逐渐改变到opacity:1,width:[auto],height:[auto]

隐藏过程()

• 过程:逐渐改变到opacity:0,width:0,height:0
• 过程:设置为display:none.

例:

比较JsFiddle上fadeIn(),fadeOut(),fadeTo(),show()和hide()的行为.