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

-1

我有一个带有mouseout和mouseover事件的div，它可以改变div的不透明度。当鼠标悬停在它上面时，div会闪烁

但是，如果你快速连续移动鼠标移出div，div会闪烁。

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

我的代码代码清除间隔不透明度过渡：

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);

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

来源

2013-10-25 Sir

这里可能会发生两件事。 1 - 当鼠标进入，然后再进入然后进入时，闪烁发生，因为它试图同时执行淡入和淡出，所以不透明度不断地发生冲突。 2 - 增加0.1可能会导致轻微闪烁，也许会有更细的像0.05。 – stewart715

是的，但我有一个clearInterval来防止或至少这是这个想法。 – Sir

您是否考虑过使用'div：hover' CSS sudo元素来达到与CSS相同的效果？这比使用JavaScript更容易，更快捷。 - http://jsfiddle.net/3xuyc/4/ – Jondlm

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

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

来源

2013-10-25 00:49:01

啊当然！现在很明显，你指出了！谢谢！ – Sir

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

回答

相关问题