JQuery的淡入/淡出的错误 - fadeTo正常工作

Question

我已经认识了jQuery淡入（）函数，这似乎是我错了的行为。

这些代码片段应该是等价的：

function fadeIn1(){ 
    $("#fadediv1").stop(true).fadeIn(2000); 
} 

function fadeOut1(){ 
    $("#fadediv1").stop(true).fadeOut(2000);    
} 

和：

function fadeIn2(){ 
    $("#fadediv2").stop(true).fadeTo(2000, 1); 
} 

function fadeOut2(){ 
    $("#fadediv2").stop(true).fadeTo(2000, 0);   
} 

但实际上例如1行为怪异。我创建了一个示例页面，您可以在其中自行测试： http://neo1.fomalhaut.uberspace.de/virtualGuitar/example.html

上面的那个不能正常工作。如果你用鼠标进入红格，蓝格将开始衰落。离开它，而它仍然衰落。现在停止时隐时开始淡出。如果你现在重新进入它，但它正在消失，它将会冻结，尽管它会再次开始淡入。但它不会。

在下面的例子中一切正常，如我所料，在这里我用了fadeTo功能。

现在可能有人告诉我，我是对的，那不应该发生这种行为，是因为淡入淡出以及就像fadeTo用1和0的目标不透明度？或者我错了，这应该是这样的，因为某种原因？

JQuery的版本是最新的一个（1.7.2），在Chrome，Firefox和Opera测试。

Answer 1

您的问题是.stop（）树立了一个新的不透明度风格的元素，在无论你是运行.stop（）的时候在哪里。所以，现在jQuery认为它应该动画的不透明度是在fadeOut序列中停止时的位置。

你可以使用fadeTo（），因为你在演示显示。或者你可以使用类似：

$("#fadediv1").stop().animate({'opacity':'toggle'}, 2000);

的切换选项会记住你的最大/最小值。所以，如果你在CSS中设置淡入淡出为opacity: 0.5，它只会在0到0.5之间动画。