4

我有一段 javascript 代码可以监听鼠标悬停并让 div 淡出并重新进入。

我遇到的问题是，如果用户鼠标多次悬停，从而导致函数的逻辑执行此操作：

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 回答
0

将淡入的状态存储在全局变量/隐藏输入字段中。启动时为 1，停止时为 0。如果变量为 1，则不要运行淡出。

于 2013-10-23T20:08:58.543 回答