4

マウスオーバーをリッスンし、div をフェードアウトさせて元に戻す JavaScript コードがあります。

私が抱えている問題は、ユーザーのマウスオーバーが複数回発生し、関数のロジックがこれを行う場合です:

mouse over¬
   fade out
   fade in [mouse over again] ¬  
                     fade out

その時点で、 afade outと a の両方がfade in同時に発生し、divで奇妙なちらつきが発生します。そして、それを防ぐ方法がわかりません。

作業フィドル: http://jsfiddle.net/WgNuX/4/マウスを div の外にすばやく移動すると、ちらつきます。

私のコードは次のとおりです。

function check(){
    var div_id = document.getElementById('my_div');
    var opacity = window.getComputedStyle(div_id).opacity;

    function fade_in(){
        var opacity = window.getComputedStyle(div_id).opacity;
        var direction =1 ; //fade in

        transition_opacity(div_id,opacity,direction,0)
    }


    var direction = 0; //fade out first
    transition_opacity(div_id,opacity,direction,fade_in)

}

 var div_id = document.getElementById('my_div');
 div_id.addEventListener('mouseover',check,false);

これを防ぐにはどうすればよいですか?

4

2 に答える 2

1

jsFiddle Demo

おそらく、フラグを使用してモーションを制御する必要があります。

var busy = false;
function check(){
 if( busy ) return;
 busy = true;
 ...
function fade_in(){
 var opacity = window.getComputedStyle(div_id).opacity;
 var direction =1 ; //fade in  
 transition_opacity(div_id,opacity,direction,function(){busy=false;});
}

これにより、アニメーションが完了するまで開始されなくなります。

于 2013-10-23T20:10:11.107 に答える