フェード機能のトラブル

Question

マウスを上にいくとフェードアウトし、マウスがフェードインするスクリプトを作った。それは 'mouseover'イベントでうまく動作しますが、 'mouseout'のアイデアで失敗しますか？

P.S. jqueryを使用していないのは、私が教育目的でこれを学びたいからです。

コードを表示するには、ここをクリックhttp://jsfiddle.net/assuredlonewolf/t2sYX/ 気軽に編集してください！

Answer 1

次の2つの問題を持っている：

• 間隔が複数回作成し、どこにもクリアされていない
あなたは要素は、目に見えるかどうかになるべきかどうかを判断するために < 1.1を使用している
• fade数ながら、 1.1から始める。明らかに、1.1は1.1より低くなることはありません。

  var interval; // Declare a variable to hold the timer OUTSIDE the function, 
         // so that all event listeners can work with ONE interval 
  function fade(elem, speed, mode) { 
      var count = 0; 
      var fade = 1.0; 
      clearInterval(interval); // Clear interval, to prevent having multiple 
            // running intervals 
      if (mode === true && count == 0) { 
       count = 1; 
       interval = setInterval(function() { 
        fade = fade - .1; 
        if(fade > -.1) document.getElementById(elem).style.opacity = fade; 
       }, speed) 
      } else { 
       count = 0; 
       interval = setInterval(function() { 
        fade = fade + .1; 
        // Updated code below: Replaced < with <= 
        if(fade <= 1.1) document.getElementById(elem).style.opacity = fade; 
       }, speed) 
      } 
  } 
  

  その他のヒント：

Updated code、あなたがそれを実装するトラブルを抱えている場合は、ヘルプを気軽に

• ストアdocument.getElementById(elem)を変数にインターバル機能の外に、（しかし、内部はfunction fadeで、パフォーマンス上の理由からです。varibaleのルックアップは、関数呼び出しよりも安価です。

Answer 2

まず、インターバルタイマーを止めることはありません。それが始まると、それは永遠に続きます。間隔を設定することからの戻り値を保存し、フェードが終了したらclearIntervalでタイマーを停止する必要があります。