javascript – JQuery fadeIn / fadeOut bug – fadeTo正常工作

我已经认识到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就像fadeto一样,0和0作为目标不透明度？或者我错了,这应该是那样的,因为某种原因？

JQuery版本是最新版本(1.7.2),在Chrome,Firefox和Opera中进行了测试.

解决方法

你的问题是.stop()正在元素上设置一个新的不透明样式,无论你在何处运行.stop().所以现在jQuery认为它应该动画的不透明度是它在fadeOut序列中停止时的位置.

您可以使用fadeto(),如演示中所示.或者您可以使用以下内容：

$(“#fadediv1”).stop().animate({‘opacity’：’toggle’},2000);

切换选项将记住您的最大/最小值.因此,如果将fadediv设置为不透明度：在CSS中为0.5,它将仅在0和0.5之间设置动画.