JSフェード効果が機能しない（ループ用）

setTimeout（）関数でJSフェード効果を試したところ、ある程度は機能していたように見えましたが、何が問題なのかわからないようです以下のコード：JSフェード効果が機能しない（ループ用）

<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
function FadeEffect(n) 
{ 
    var i=1; 
    fade = document.getElementById("box"); 
    if (n===1) 
    { 
     fade.style.opacity=i/10; 
     i++; 
     setTimeout("FadeEffect(1)",50); 
     if (fade.style.opacity=1) 
     { 
     var i=1; 
     } 
    } 
    else if (n===0) 
    { 
     fade.style.opacity=1-i/10; 
     i++; 
     setTimeout("FadeEffect(0)",50); 
     if (fade.style.opacity=0) 
     { 
     var i=1; 
     } 
    } 
} 


</script> 
<style type="text/css"> 
#box{ 
width: 200px; 
height: 50px; 
border: 1px solid black; 
background-color: #ccc; 
opacity: 0; 
} 
</style> 
</head> 
<body> 
<div onMouseOver="FadeEffect(1)" onMouseOut="FadeEffect(0)" id="box">Menu</div> 
</body> 
</html>

編集：コードをsetTimeout（）関数で更新しました。

出典

2011-12-28 Onion

jQueryを試すことができます。非常にいいですし、要素にフェード効果を簡単に追加することができます。 – omnidan

提案していただきありがとうございますが、質問にはまだ答えられていません。私は初心者ですから、本当にすべてを理解したいと思っています。 – Onion

あなたはあなたの質問で "setTimeout（）"を使用していますが、あなたが投稿したコードには "setTimeout（）"の呼び出しはないと言っています。 – Pointy

私が見ることのできる機能には2つの問題があります。

最初に、ifステートメントはどちらも比較ではなく割り当てを行います。 if (n===0)（3つの===、比較、またはタイプ変換の比較に2つの==を使用できます）と言うべきときにif (n=0)（1つは=代入）と言っています。

第2に、ループを使用してスタイルを繰り返し変更すると、コードが実行されているときにブラウザが表示を更新しないため、フェードすることはありません。 JavaScript。したがって、関数が終了した後にページが更新されます。あなたは、ブラウザにsetTimeout()を使用して、各反復後に更新する機会を与える必要が - 何かのように：

function fadeEffect(element,startValue,target,delay){ 
    element.style.opacity = startValue; 
    if (startValue < target) 
     startValue = Math.min(startValue + 0.1, target); 
    else 
     startValue = Math.max(startValue - 0.1, target); 

    if (startValue != target) 
     setTimeout(function(){fadeEffect(element,startValue,target,delay);}, delay); 
} 

<div onMouseOver="fadeEffect(this, 1, 0, 100);" 
    onMouseOut="fadeEffect(this, 0, 1, 100);" id="box">Menu</div>

デモ：http://jsfiddle.net/hLQ6y/2/

EDIT：あなたが移動する場合、このコードは見事にすべてのことを対応していないことに注意してくださいマウスが早すぎたり早すぎたりする、つまり、フェードアウトが完了する前にフェードインをトリガーした場合。あなたは.setTimeout()からの戻り値を保存し、必要に応じて.clearTimeout()を呼び出すことでこれを解決することができます。私が既に質問の本質をカバーしていたので、私は微調整を読者のための練習として残しておきます...

更新：あなたの更新されたコードは、比較の問題。また、setTimeout()を永遠に呼び出しています - あなたはPointyと私が与えた答えのように条件付きで行うべきです。また、変数iに依存しているようですが、これはローカル変数として呼び出し間で値を保持しません。グローバルにすることもできますが、私のようにパラメータとして管理する方が良いでしょう。 Pointyのような外部関数が行った。

出典

2011-12-28 15:03:52 nnnnnn

あなたの答えをありがとう！ – Onion

詳細な回答をいただきありがとうございます。私はいくつかの研究を行い、演算子と比較について新しいことを学びました。今私は間違いを見る。 – Onion

スタイルが変更されると、ブラウザが表示を更新する前にすべての変更が行われるという問題があります。あなたがしなければならないことは、 "setTimeout（）"を使ってずっと長い時間にわたって変更を取り去ることです。 — Here

function fadeIn() { 
    function increment() { 
    box.style.opacity = Math.min(1.0, (opacity += 0.1)); 
    if (opacity < 1.0) { 
     setTimeout(increment, 100); 
    } 
    } 
    var box = document.getElementById('box'), opacity = 0; 
    box.style.opacity = opacity; 
    setTimeout(increment, 100); 
}

編集実証するjsfiddleです。

出典

2011-12-28 14:59:21 Pointy

私はsetTimeout（）関数を使ってコードを編集しましたが、これは動作していません。 – Onion

私はjsfiddleで作業していますが、サイトは本当に遅いです。今朝は... – Pointy

私は、私が更新したコードをご覧ください。何らかの理由で動作しません。 – Onion

フェードする場合は、不透明度-0.1または+0.1を設定してから、100ms以内にsetTimeoutを呼び出す関数を作成する必要があります。スクリプトを待機させないと、速すぎて即座に不透明度を1.0に設定します。

とにかく、これはjQueryを使って簡単に行うことができます。

出典

2011-12-28 15:00:41 omnidan

JSフェード効果が機能しない（ループ用）

答えて

関連する問題