JQuery的淡入/淡出的錯誤 - fadeTo正常工作

Question

我已經認識了jQuery淡入（）函數，這似乎是我錯了的行爲。

這些代碼片段應該是等價的：

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

上面的那個不能正常工作。如果你用鼠標進入紅格，藍格將開始衰落。離開它，而它仍然衰落。現在停止時隱時開始淡出。如果你現在重新進入它，但它正在消失，它將會凍結，儘管它會再次開始淡入。但它不會。

在下面的例子中一切正常，如我所料，在這裏我用了fadeTo功能。

現在可能有人告訴我，我是對的，那不應該發生這種行爲，是因爲淡入淡出以及就像fadeTo用1和0的目標不透明度？或者我錯了，這應該是這樣的，因爲某種原因？

JQuery的版本是最新的一個（1.7.2），在Chrome，Firefox和Opera測試。

Answer 1

您的問題是.stop（）樹立了一個新的不透明度風格的元素，在無論你是運行.stop（）的時候在哪裏。所以，現在jQuery認爲它應該動畫的不透明度是在fadeOut序列中停止時的位置。

你可以使用fadeTo（），因爲你在演示顯示。或者你可以使用類似：

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

的切換選項會記住你的最大/最小值。所以，如果你在CSS中設置淡入淡出爲opacity: 0.5，它只會在0到0.5之間動畫。