javascript - 鼠标悬停在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().