jQuery FadeIn / FadeOut错误-fadeTo正常工作

Question

我已经认识到jQuery fadeIn（）函数的行为，这对我来说似乎是错误的。

这些代码片段应等效：

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

上一个是不能正常工作的。如果使用鼠标输入红色div，则蓝色div将开始渐入。将其保留在渐入时，将其保留。现在，它将停止渐入并逐渐消失。如果现在重新输入它，虽然它逐渐消失了，但是它将冻结，尽管它应该再次开始逐渐消失。但是事实并非如此。

在下面的示例中，一切都按我的预期工作，在这里我使用了fadeTo函数。

现在有人可以告诉我我是对的，并且不应该发生此行为，因为fadeIn和fadeOut就像带有目标透明度的1和0的fadeTo一样？还是我弄错了，由于某种原因，应该是这样吗？

JQuery版本是最新版本（1.7.2），已在Chrome，Firefox和Opera中进行了测试。

Answer 1

您的问题是 .stop() 在运行 .stop() 时在元素上设置新的不透明度样式。所以现在 jQuery 认为它应该设置动画的不透明度是在淡出序列期间停止时的位置。

您可以使用 fadeTo()，如演示中所示。或者你可以使用类似的东西：

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

切换选项将记住您的最大/最小值。因此，如果您像 CSS 中那样设置 fadediv，opacity: 0.5它只会在 0 到 0.5 之间进行动画处理。