Javascriptのフェードインフェードアウトが動作しない

Question

私はこれを数日間把握しようとしていましたが、それは正しいと思われますが、フェードインしてもアウトではなくなりました。まったく動かない。私は

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> 

Answer 1

はなぜ車輪の再発明？素晴らしいjQueryライブラリがあなたのためにそれを行います（他の多くの素敵なトランジションはもちろんありません）。

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

は、「ボタン」divを500ms間フェードアウトし、終了後に「完了」ログを記録します。

Answer 2

私は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は実施例です。