Javascript fadein fadeout無法正常工作

我一直在試圖弄清楚這幾天現在看來似乎沒有得到它正確的，我已經淡入淡出，現在，我已經設置淡入淡出它根本不工作。我缺少Javascript fadein fadeout無法正常工作

的javascript：

function fadein(objectID, amount) { 
    object = document.getElementById(objectID); 

    animatefadein = function() { 
     var MIN_OPACITY = 0; 
     var MAX_OPACITY = 1; 
     if (object.style.opacity < MAX_OPACITY && object.style.opacity > MIN_OPACITY) { 
      var current = Number(object.style.opacity); 
      var newopac = current + amount; 
      object.style.opacity = String(newopac); 
      setTimeout('animatefadein()', 25); 
     } 
    } 
    animatefadein(); 
}

和HTML

<div id="rolloverwrapper" style="opacity:0;"></div> 
<div id="wrapper"> 
    <div id="content"> 
     <div id="button"> 
      <img src="images/dj.png" onmouseover="fadein('rolloverwrapper', 0.1);" onmouseout="fadein('rolloverwrapper', -0.1);"/> 
     </div> 
    </div> 
</div>

來源

2012-01-05 Chris James Champeau

我相信任何css字段在添加到元素的'style'對象時都會轉換爲字符串。您需要在該字段上調用'parseFloat（）'以獲取它的數值。 – 2012-01-06 00:03:40

而不是'Number（object.style.opacity）'？ – 2012-01-06 00:05:11

當我做淡入/淡出時，我曾經在超時時間內將當前值傳遞給函數。我有兩個例子工作：[鏈接]（http://wforums.net/project/）和[鏈接]（http://schrijnwerkerij-de-jonghe.be/Home.html） – canihavesomecoffee 2012-01-06 00:46:40

爲什麼另起爐竈？可怕的jQuery圖書館將爲你做到這一點（更不用說許多其他簡潔的過渡）。

$("#button").fadeOut(500, function() { console.log("done"); });

將使「按鈕」div褪色500毫秒，並在完成後記錄「完成」。

來源

2012-01-06 00:18:49 Art

但我不想淡出按鈕的div，我想淡入滾動鼠標滾動到一個完全不同的div – 2012-01-06 00:47:54

嗯jQuery做的工作， – 2012-01-06 01:02:09

如果你正在尋找鼠標事件 - 使用mouseenter/mouseleave而不是mouseover/mouseout。後者不會冒泡，並且可能不會給你想要的行爲。 – Art 2012-01-06 01:06:42

我完全同意Art Hanzel的回答，你應該使用這個jQuery。不過，爲了解決您的問題，改變你的功能如下（如果條件是不正確的在你的版本）：

function fadein(objectID, amount) { 
    object = document.getElementById(objectID); 
    animatefadein = function() { 
     var MIN_OPACITY = 0; 
     var MAX_OPACITY = 1; 
     if ((amount > 0 && object.style.opacity < MAX_OPACITY) || (amount < 0 && object.style.opacity > MIN_OPACITY)) { 
      var current = Number(object.style.opacity); 
      var newopac = current + amount; 
      object.style.opacity = String(newopac); 
      setTimeout('animatefadein()', 25); 
     } 
    } 
    animatefadein(); 
}

Here是一個工作的例子。

來源

2012-01-06 01:03:39 legendofawesomeness

Javascript fadein fadeout無法正常工作

回答

相關問題