Javascript fadein鼠標懸停工作，但不fadeout

所以真實簡單，我已經想出瞭如何淡出鼠標懸停呼叫div。但我想知道如何淡出它，而不是簡單地重複它已經存在的JavaScript對立面，並將它鏈接到一個onmouseout。Javascript fadein鼠標懸停工作，但不fadeout

這裏是我的javascript：

<script type="text/javascript"> 
    function fadein(objectID){ 
object = document.getElementById(objectID); 
object.style.opacity = '0'; 

animatefadein = function(){ 
if(object.style.opacity < 1){ 
var current = Number(object.style.opacity);  
var newopac = current + 0.1; 
object.style.opacity = String(newopac);  
setTimeout('animatefadein()', 100); 
} 
} 
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');"/> 
     </div> 
    </div> 
</div>

來源

2012-01-05 Chris James Champeau

如果你想要的行爲是你已經有相反的，但在不同的事件，然後簡單地做。當你知道一個簡單的解決方案時，不要尋找奇特的解決方案，並且它可以工作。

來源

2012-01-05 21:53:52 cdeszaq

將參數添加到您的淡入淡出功能以指定淡入淡出方向。 1/-1,0/1，t/f等等，並把它傳遞給你的animatefadein。

然後你不得不

<img src="..." onmouseover="fadein('rolloverwrapper', 1)" onmouseout="fadein('rolloverwrapper, 0)" />

但是，你應該考慮使用jQuery的這種事情。與JS的這幾行相比，圖書館將是一個「沉重的」，但您獲得的靈活性非常大。

來源

2012-01-05 21:55:32

是啊，我只是不知道Jquery的所有，但還好，所以我將如何添加參數的方式我正在這樣做，我想我將不得不重新開始或不開始？它會拉開它不分開始我猜 – 2012-01-05 22:00:32

嘗試是這樣的：

<script type="text/javascript"> 
    function fade(objectID, amount) { 
     var MIN_OPACITY = 0; 
     var MAX_OPACITY = 1; 

     object = document.getElementById(objectID); 

     animatefade = function() { 
      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('animatefade()', 100); 
      } 
     } 
     animatefade(); 
    } 
</script>

用下面的HTML：

<img src="images/dj.png" onmouseover="fade('rolloverwrapper', 0.1);" onmouseout="fade('rolloverwrapper', -0.1);"/>

來源

2012-01-05 21:59:12

我認爲這是接近，但它不起作用，它實際上使img dj.png消失 – 2012-01-05 22:05:39

Javascript fadein鼠標懸停工作，但不fadeout

回答

相關問題