元素衰落中，但不是淡出

Question

我有以下的javascript

function fadeIn(objectID, amount) { 
object = document.getElementById(objectID + 'Des'); 
if(amount > 0) 
{ 
    object.style.display ='block'; 
    object.style.opacity = '0'; 
} 
var i = 0; 
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 + Number(amount); 
     object.style.opacity = String(newopac); 
     setTimeout('animatefadein()', 50); 

    } 

} 
animatefadein(); 
if(amount < 0) 
{ 
    object.style.display ='none'; 
} 

}

我需要設置顯示爲無因爲在它上面的另一元件需要，如果用戶瀏覽被放置在他們身上。

這裏是HTML，

<div id='products'> 
      <img src = './product1.png' usemap='#ourProducts' alt='Our Products' title='Hover over the names to find out more.'> 
      <map id='ourProducts' name='ourProducts'> 
       <area shape='rect' coords="55,55,210,110" href='#' id='forcePort' alt='ForcePort' title='ForcePort' onmouseover='fadeIn("forcePort",0.1)' onmouseout='fadeIn("forcePort",-0.1)'/> 
       <area shape='rect' coords="105,248,270,290" href='#' id='quickPort' alt='QuickPort' title='QuickPort' onmouseover='fadeIn("quickPort",0.1)' onmouseout='fadeIn("quickPort",-0.1)'/> 
       <area shape='rect' coords="390,260,535,303" href='#' id='scrinter' alt='Scrinter' title='Scrinter' onmouseover='fadeIn("scrinter",0.1)' onmouseout='fadeIn("scrinter",-0.1)'/> 
       <area shape='rect' coords="675,242,835,292" href='#' id='bugTrail' alt='Bug Trail' title='Bug Trail' onmouseover='fadeIn("bugTrail",0.1)' onmouseout='fadeIn("bugTrail",-0.1)'/> 
       <area shape='rect' coords="688,42,858,138" href='#' id='dataExtract' alt='CRM Data Extractor' title='CRM Data Extractor' onmouseover='fadeIn("dataExtract",0.1)' onmouseout='fadeIn("dataExtract",-0.1)'/> 
      </map> 
      <div id='productDes'> 
       <div id='scrinterDes'> 
             Data that needs to be shown! 
       </div> 
       <div id='bugTrailDes'> 
       </div> 
       <div id='quickPortDes'> 
       </div> 
       <div id='forcePortDes'> 
       </div> 
       <div id='dataExtractDes'> 
       </div> 
      </div> 
     </div> 

正如你能看出來是不工作的褪色。另外，如果您在setTimeout循環中放置一個計數器並將其打印到控制檯，您將看到它在淡出事件上循環了無數次。下面是該網站的問題，

Website

只要前往產品顯示屏上，將鼠標懸停在產品名稱。

Answer 1

我希望你知道，這是很容易與jQuery http://jquery.com/完成你的腳本的問題是，Opacity和Display是兩個不同的CSS屬性，使這項工作，你需要設置Opacity爲0，改變Display: none到block或inline-block，然後動畫的Opacity

Answer 2

見這裏：http://jsfiddle.net/V8SAx/

首先，你永遠不應該叫setTimeout這樣的：setTimeout('animatefadein()', 50)，因爲它使用eval，這是非常緩慢和不安全的。

其次，在這裏你的代碼：一個回調，這是衰落的過程稱爲後

function fadeIn(objectID, amount,callback) { 
    object = document.getElementById(objectID + 'Des'); 
    object.style.display ='block'; 
    object.style.opacity = String(Number(amount<0)); 
    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 + Number(amount); 
      console.log(current + Number(amount)); 
      object.style.opacity = String(newopac); 
      setTimeout(animatefadein, 50); 

     }else{ 
      if(amount<0){object.style.display='none';} 
      if(callback){callback();} 
     } 

    } 
    animatefadein(); 
} 
fadeIn('a',0.1,function(){fadeIn('a',-0.1);}); 

我加入了支持，也許您有興趣。