5

我已经认识到 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 一样，目标不透明度为1 和0？还是我弄错了，由于某种原因，这应该是那样的？

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

4

1 回答 1

2

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

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

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

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

于 2012-07-01T20:53:43.040 回答