0

私はいじって、JavaScript で小さなフェードアウト関数を作成しようとしています。これが私が思いついたものです:

function fadeOut(id, time){
  var elem = document.getElementById(id);
   elem.style.opacity = 1;
   var opc = 1;
   while(opc >= (1/time)){
      opc -= (1/time);
      console.log(opc);
      elem.style.opacity = opc;
   }
   elem.style.opacity = 0;
}

ただし、これは div の不透明度を「リアルタイム」で表示するのではなく、不透明度 = 0 である最終結果を表示します。
ここでテストしました：

fadeOut("hello",10000);
document.getElementById("hello").style.opacity = 1;
fadeOut("hello",10000);
document.getElementById("hello").style.opacity = 1;
fadeOut("hello",10000);
document.getElementById("hello").style.opacity = 1;

計算には長い時間がかかり、計算が終了したときにのみ結果がダンプ
され、計算中にシームレスに表示されません。
どうすればこれを解決できますか?

4

5 に答える 5

2

関数が完了してイベント ハンドラーが実行できるようになるまで、UI は更新されないため、タイマーを設定する必要があります。

于 2012-06-02T16:16:37.000 に答える
2

これは、ブラウザーが変更を適用できるように、スレッドを「放棄」していないためです。

代わりに、次のように setTimeout(..) を使用します。

function fadeOut(id, time){
   var elem = document.getElementById(id);
   if(opc >= (1/time)){
      opc -= (1/time);
      console.log(opc);
      elem.style.opacity = opc;
      setTimeout(function(){fadeOut(id,time);}, 100);
   }
   else
      elem.style.opacity = 0;
}

本当に素晴らしいコードではありませんが、アイデアが得られます。

jQueryライブラリを使用できるかもしれません。その場合は、fadeOutを使用します。

于 2012-06-02T16:16:59.233 に答える
1

この問題の原因の 1 つとして、イベントのバブリングが考えられます。event.stopPropagation() を使用して、イベント (イベントに応答して FadeOut 関数を使用している場合) がバブリングしないようにしてください。

コードは

function StopBubble(e)
{   
    if (!e)
        e = window.event;

    e.cancelBubble = true; /* Microsoft */
    if (e.stopPropagation)
        e.stopPropagation(); /* W3C */
}
于 2012-06-02T16:27:10.300 に答える
0

効果を確認するには、DOM を変更するたびに遅延を指定する必要があります。javascript には一時停止機能を追加するオプションがないため、タイマーに頼る必要があります。これを実現するには 2 つの方法があります。最も一般的に使用されるアプローチは setInterval(fn,sec) です。ただし、 setInterval は、前の実行が完了しているかどうかに関係なく、指定された時間間隔ごとにコールバックを実行するため、悪いです。

個人的には、車輪を再発明するのではなく、ライブラリを使用することをお勧めします。しかし、ライブラリが舞台裏で何をしているのかを基本的に理解しておくことは常に良いことです。

以下は、setInterval なしでこれを実現するためのサンプル スニペットです。

注: これはデモンストレーション用です。クロスブラウザ対応ではありません。再利用性とクロス ブラウザー互換性のために拡張します。

<div id="mydiv"></div>

function fadeOut() {

    var _timeOut,
        _proceed = true,
        _elm = document.getElementById( "mydiv" ),
        _opacity;

    function addOpacity() {

        // _elm.style.opacity will return empty string
        // see https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
        // getComputedStyle() not cross broswer

        _opacity = +window.getComputedStyle( _elm, null ).getPropertyValue( "opacity" );
        if( _opacity > 0.1 ) {
            // a simple algorithm for basic animation
            _elm.style.opacity = _opacity / 2;
        } else {
            _elm.style.opacity = 0;
            _proceed = false;
        }
    }

    (function animate() {
        if( !_proceed ) {
            clearTimeout( _timeOut );
            return;
        }

        addOpacity();

        // unlike setInterval(), this approach waits for addOpacity() to complete before its executed again
        _timeOut = setTimeout( animate, 1000 );

    }());   

}
于 2012-08-23T11:05:42.363 に答える
0

jQuery のような JavaScript ライブラリを使用しないのはなぜですか? 一部の JavaScript コードは、さまざまな種類のブラウザーと互換性がないためです。

jQueryでは、これを使用できます：

$(".id").css("background","blue").fadeOut("slow");
于 2012-06-02T16:25:46.707 に答える