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

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

Answer 1

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

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

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

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

JQuery fadeIn / fadeOut bug - fadeTo正常工作

1 个答案: