当鼠标悬停在它上面时，Div会闪烁

Question

我有一个带有mouseout和mouseover事件的div，它会改变div的不透明度。

但是如果你快速连续地将鼠标移动到div之外，div就会闪烁。

我正试图找到一种方法来阻止闪烁，以便取消之前的操作，因此不会闪烁。 我使用了明确的间隔，但似乎没有解决问题...这是我的小提琴：

的 http://jsfiddle.net/3xuyc/4/ 的

我的代码代码清除了不透明度转换的间隔：

function fade(dir){
 var interId = null;
    function fade_in() {
        clearInterval(interId);
        var div_id = document.getElementById('my_div');
        var opacity = window.getComputedStyle(div_id).opacity;
        interId = transition_opacity(div_id, opacity, 1, 0);
    }
   function fade_out() {
        clearInterval(interId);
        var div_id = document.getElementById('my_div');
        var opacity = window.getComputedStyle(div_id).opacity;
        interId = transition_opacity(div_id, opacity, 0,0);
   }

    if(dir){      
        fade_in();
    } else {
        fade_out();
    }
}

var div_id = document.getElementById('my_div');
    div_id.addEventListener('mouseover', function(){fade(1);}, false);
    div_id.addEventListener('mouseout', function(){fade(0);}, false);

有关如何解决此问题的任何建议？

Answer 1

如果我理解正确，您使用clearInterval来停止之前的淡入/淡出。

尝试在var inter_id函数之外声明fade()。每次拨打null时，您都会将其设置为fade()。