는 요소는 페이드,하지만

Question

을 페이드 아웃하지 I가 다음과 같은 자바 스크립트

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'; 
} 

}

내가 때문에 다른 요소는 사용자가 탐색 할 경우 배치해야 그 위에 없음으로 표시를 설정해야

그들을 넘어서. 당신이 밖으로 작동하지 않는 페이드를 볼 수 있듯이 여기

는

<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> 

는 HTML입니다. 또한 setTimeout 루프 안에 카운터를 넣고 콘솔에 출력하면 페이드 아웃 이벤트에 셀 수없는 시간이 반복되는 것을 볼 수 있습니다. 여기에 문제의 사이트,

Website

그냥 디스플레이에 제품에 이상 머리, 제품 이름 위에 마우스를 올려이다.

Answer 1

나는, 당신이 아주 쉽게 스크립트의 문제가 Opacity 및 Display이 두 가지 CSS 속성이이 작업을하기 때문이다, 0으로 Opacity을 설정해야 할 것 jQuery를 http://jquery.com/로 이루어집니다 것을 깨닫게되기를 바랍니다 것 이 같은 setTimeout 전화를해서는 안됩니다, http://jsfiddle.net/V8SAx/

첫째 : block 또는 inline-block에 Display: none을 변경 한 다음 Opacity

Answer 2

는 여기를 참조 애니메이션이 eval를 사용하기 때문에, setTimeout('animatefadein()', 50)을, 매우 느리고 불안정합니다. 어쩌면 관심사, 페이딩 처리 후 호출되는 콜백에 대한

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);}); 

내가 추가 한 지원 :

둘째, 여기에는 코드가 있습니다.