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

JQuery fadeIn/fadeOut bug - fadeTo works correctly

本文关键字：淡入 常工作 工作 淡出 错误 JQuery      更新时间：2023-09-26

我已经认识到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 函数。

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

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

你的问题是 .stop（） 在元素上设置了新的不透明度样式，在运行 .stop（） 时的任何位置。所以现在jQuery认为它应该动画化的不透明度是在淡出序列中停止时的位置。

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

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

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

相关文章：