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

Div flickers when mouse hovers over it

本文关键字：Div 闪烁 鼠标 悬停      更新时间：2023-09-26

我有一个带有鼠标退出和鼠标悬停事件的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);

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

如果我

理解正确，您正在使用clearInterval来阻止以前的淡入/淡出。

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

相关文章：